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!

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

The background is staying on navy when i try to resize the website

This is the current snapshot: https://w.trhou.se/eo5uzrrf1o

i did exactly what nick did

Steven Parker

3 Answers

Your css is correct you can test it by setting the min-width to something a little larger, for example:

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

This rule will apply anytime the width of the screen is at least 960px, if the screen size goes below that the rule will not apply. Try resizing your browser window.

If you are using Chrome or Safari it is possible you can't adjust the size of your browser below 500px and since the screen size isn't getting below the 480px which you set as your 'min-width' in your workspace the rule is always being applied and the background is always set to blue.

I did what u said and set min-height to 960px and it's worked and i do use chrome. I still dont fully understand why it didnt worked

Rouillie Wilkerson
Rouillie Wilkerson
10,419 Points

I noticed a similar issue, only because in Chrome, my screen doesn't scale that small. So I tested it by raising the px width to something I could see, like 600px., and it worked beautifully!

Robert Young
Robert Young
11,579 Points

The HTML is missing a meta tag to scale correctly for mobile, add this to your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">