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 How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Emanuele Di Giovanni
Emanuele Di Giovanni
767 Points
Posted by Emanuele Di Giovanni
Emanuele Di Giovanni
767 Points

colour does not change after resize

Hi everyone, I followed step by step the code as nick does, and when i get to the point to check if the first media querie works, the background will change to navy and it will stay that way, even after resizing or refreshing the page, thanks for any help, this is my code:

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

Logan Wu
Logan Wu
10,792 Points
Logan Wu
Logan Wu
10,792 Points

Hi Emanuele, Are you sure your code is exactly the same code as Nick typed? Make sure the symbols and the keywords you use are exactly the same.

here's your code:

@media screen and (min-width: 480px) {
body {
  background: navy;
  }
}
Marco Morales
Marco Morales
6,833 Points
Marco Morales
Marco Morales
6,833 Points

It should stay blue from 480px and wider until you add a second media query as Nick did when he added the green background at 660px.

If you reduce the browser window below 480px wide, does it return to white?

Emanuele Di Giovanni
Emanuele Di Giovanni
767 Points
Emanuele Di Giovanni
Emanuele Di Giovanni
767 Points

oh i just realised something: my code is fine, the problem is the min-width of the browser window. it is wider than 480px, i guess that's why it does not go back to white. Do you know how can i fix this? thanks again.

Logan Wu
Logan Wu
10,792 Points
Logan Wu
Logan Wu
10,792 Points

You may not need to fix anything but just adjust the size of your browser window using the mouse to reveal the change.

Emanuele Di Giovanni
Emanuele Di Giovanni
767 Points
Emanuele Di Giovanni
Emanuele Di Giovanni
767 Points

That is what i did, but when i narrow the browser window it won't get smaller than a certain size. I modified my code and if I type 510px instead of 480px, the page will go to white and as soon as i resize, it will change to navy.

2 Answers

Marco Morales
Marco Morales
6,833 Points
Marco Morales
Marco Morales
6,833 Points

If your browser can't reduce in width more than 480px and you still want to see how the media query switches between blue and white, just change the min-width to a number larger than your minimum width of your browser window. Eg. if your browser only goes down to 600px wide, change it to min-width: 700px and you should see the switch.

Emanuele Di Giovanni
Emanuele Di Giovanni
767 Points
Emanuele Di Giovanni
Emanuele Di Giovanni
767 Points

yes that is exactly the problem and everything is fine now. Thanks so much for the help.