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
<noob />
17,062 PointsThe 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
3 Answers
scribbles
21,173 PointsYour 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.
Rouillie Wilkerson
10,419 PointsI 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
11,579 PointsThe 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">
<noob />
17,062 Points<noob />
17,062 PointsI 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