Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by brandonlind2
brandonlind2
7,823 Points

Any ideas as to why my header {background: white;} isn't working within @media

If I copy and paste the header {background: white;} in my normal css it works, however for some reason it isn't working within @media{} any ideas as to why?

@media screen and (min-width: 480px) { header{ background: white;}

                 nav li { display: inline-block;
                         border: none;
                         margin: 0 5px;
                         padding: 3px;}

                nav {float: right;
                     margin: 25px 25px 0 0;}

            header h1 {float: left;
                       margin: 0 0 0 25px;}

           .subtitle-1 {clear: both;}
Senad Redzic
Senad Redzic
4,474 Points

@media screen and (min-width: 480px) { header { background: white; } }

You are missing last bracket "}" .

2 Answers

Grace Kelly
Grace Kelly
33,990 Points

Hi Brandon, I think the issue is you are missing the last bracket on your media query, try adding it, like so:

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

                header{ background: white;}

                 nav li { display: inline-block;
                         border: none;
                         margin: 0 5px;
                         padding: 3px;
                         }

                nav {float: right;
                     margin: 25px 25px 0 0;}

            header h1 {float: left;
                       margin: 0 0 0 25px;}

           .subtitle-1 {clear: both;}

} /* add last bracket to close media query */

Hope that helps!!

Senad Redzic
Senad Redzic
4,474 Points
Senad Redzic
Senad Redzic
4,474 Points

@media screen and (min-width: 480px) { header { background: white; } }

You are missing last bracket "}" .

Sorry I wrote it as an comment before :)