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

Cody Tapp
Cody Tapp
7,158 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

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
22,085 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,022 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.