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

HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Posted by Cody Tapp
Cody Tapp
9,667 Points

My Background changing from navy blue to green, but not the original white?

Here's my code.

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

@media screen and (min-width: 660px) { body { background: darkgreen; } }

Like I said, it will stretch to green and back to blue, but no matter how far I shrink the window, it stays navy. Compatibility issue maybe?

Vicente Borjas
Vicente Borjas
9,995 Points
Vicente Borjas
Vicente Borjas
9,995 Points

Hi, I used your code and work perfectly; Maybe the problem could be that you have a CSS rule for your body background that make it maintain that navy color when you are under 480px.

2 Answers

Darrell Osborne
Darrell Osborne
23,145 Points
Darrell Osborne
Darrell Osborne
23,145 Points

With Vicente's reply, try to use the inspector tools built into your browser to see where the "rule" is that keeps it blue after you drop below 480px wide.

Máire van Blerck
Máire van Blerck
11,475 Points
Máire van Blerck
Máire van Blerck
11,475 Points

What Darrell says. You can find the inspector when you open this page in firefox and select web inspector under "extra". Make sure you click on the square (with the arrow in it) -button and select the element you want to follow. In the menu on the right you can now see the css which is applied to the element you selected. When you resize your window you can see something changed and on which line of your css file.