wordman wordman - 2 months ago 8
CSS Question

Unordered List background color disappears in media query

I have two lists for a navbar in the footer of an HTML5 page, the first list has 12 items for navigating the site, the second contains social media links and one additional item:

<nav id="footer_navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Thing 1</a></li>
<li><a href="#">Thing 2</a></li>
<li><a href="#">Thing 3</a></li>
<li><a href="#">Thing 4</a></li>
<li><a href="#">Thing 5</a></li>
<li><a href="#">Thing 6</a></li>
<li><a href="#">Thing 7</a></li>
<li><a href="#">Thing 8</a></li>
<li><a href="#">Thing 9</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">One Last Thing</a></li>
</ul>
</nav>


And the CSS for these lists:

#footer_navbar {
margin:0;
padding:0;
list-style:none;
text-align:center;
}

#footer_navbar ul li {
display:inline;
}

#footer_navbar ul li a {
margin:0 5px;
}

#footer_navbar ul:first-child {
margin-bottom:10px;
}


The last part separates the two lists on two lines as opposed to placing a
<br />
tag between them. I found the information on SO HERE. You'll notice I removed the
>
from the code suggested as my lists are not nested. I get the desired results though, if there is a reason I should leave in the
>
please let me know.

Everything works fine, and now I want to employ media queries in my CSS so that the aforementioned menu changes similar to what is shown in THIS ARTICLE ON RWD (the differences being the background color, placement on screen and margin and padding).

So I add this media query to the CSS file:

@media screen and (max-width: 480px) {

#footer_navbar li {
background:#222;
display:block;
margin:5px;
}

#footer_navbar a {
display:block;
padding:3px;
}

}


And when I resize the browser window or view it on my iPhone 4S, everything works correctly EXCEPT the
background:#222;
is not displaying in the
<li>
elements. I can see it in the CSS using Firebug, but the color is not being displayed. Everything else works as planned, margin and padding are correct, the links display as
block
, all good. After hours of head scratching, I have yet to figure out what it is that I am missing or doing wrong.

Any help will be gratefully received and appreciated.

UPDATE

A sample of this website can be seen HERE

Answer

You have a css style

.footer_navbar ul li {
  display:inline;
}

and media query css

.footer_navbar li {
        background:#222;
        display:block;
        margin:5px;
    }

Change the query css to

.footer_navbar ul li {
        background:#222;
        display:block;
        margin:5px;
    }

and it will work.

Your display property of the li i.e display:block is not applied as it is taking the property from

.footer_navbar ul li {
      display:inline;
    }