I am attempting to layout the mobile version of my web page using mobile first design principle and media query. I am close to getting what I want except for a few gaps and some unruly list elements.
At the top of my page I have the site name and a menu. When the menu is clicked, a vertically stacked unordered list (in blue) will show up with the help of Javascript. At the moment Javascript has not yet been added to hide the vertically stacked unordered list thus it’s always showing.
There are gaps above, below and to the left of the unordered list. The gap to the left is forcing the unordered list items too far to the right. Please look at my markup in the link below, resize my page to see what it looks like, and help remove the gaps. Link
Thanks that works great. I thought that when I set the margin and padding of the body element to zero, it would override the default padding placed by the browser.
placing body{}only effects the body but any elements inside do not get effected therefore there are examples out there that can reset ALL elements as it goes way beyond than a few codes to completely reset a page but yes as Ray.H pointed out that is the way to reset the <ul> tags just becarefull when using element selection css as that will effect all elements on a page.
best way to avoid effecting other <ul> elements is to apply a class to the <ul> elements u wish to edit or u could apply classes to elements you don’t want effected by the global selection by using classes.