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,405 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,535 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">