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

Script Ninja
Script Ninja
15,003 Points

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

1 Answer

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.

Script Ninja
Script Ninja
15,003 Points

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