Fit Nav Inside A Div And Removing Gaps Using A Media Query

HTML & CSS
1

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

2

Hi,
The gaps to the left are the default padding that the browser places there until you change it or reset it.

The gaps above and below are caused by the default margins.


         #banner nav ul { 
         margin:0; /*added this*/
         padding:0;/*added this*/
         list-style: none;
         text-align: left;
         width:100%;         
         background-color:black;
         }

There is also no need to set a fixed height on the li, just let the text control that.

         #banner ul li {
         background-color: #1E90FF;
         width:100%;
         /*height:42px;*/
         margin: 1px 0;
         padding:0;
         color:white;
         /*padding-right:15px;*/
         padding:0 10px;
         }

I gave left and right padding to keep the text off the edges too.

Adjust as needed :slight_smile:

You can also move most of the li styles to the anchor instead, then change the anchor to display:block;

3

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.

1 Like
4

Hi Oangodd

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.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.