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
Harrison Greeves
2,920 PointsMy window will not change to red when I shrink it to 480px
It will turn blue on the way. I've checked the syntax a few times and everything seems to be in check.
@media (max-width: 960px) {
body {
background-color: royalblue;
}
p {
color: white;
}
}
@media (max-width: 480px) {
body {
background: darkred;
}
}
4 Answers
Steven Parker
231,269 Points480px is pretty small. I wasn't able to reduce my window enough to try that.
But I changed 480 to 600 and it seemed to work as expected. Are you sure you were testing it on a small enough window? Also consider that a device that small may present a larger "virtual" size to the browser and provide a horizontal scroll capability to see the rest.
UPDATE: I tried "zooming in" and was able to set the window below the breakpoint. That color shifted then as expected.
Jorge Vega
Front End Web Development Techdegree Student 2,905 PointsHi!
I had the same problem but it worked after I change the Media Query to 488px
Thank you!
jorge
Seokhyun Wie
Full Stack JavaScript Techdegree Graduate 21,606 PointsI had the same problem and it worked!
-using MacBook Pro 15inch
Rich Donnellan
Treehouse Moderator 27,696 Points
Enabling dev tools in "your favorite browser" lets you resize the viewport much smaller than you could if dev tools were disabled.
Steven Parker
231,269 PointsDevice simulation in the devtools didn't work, and is what gave me the idea that the simulated device was using a larger virtual width than the actual one (or was just buggy).
Rich Donnellan
Treehouse Moderator 27,696 PointsI typically avoid using one of the simulated devices. Keep it "responsive" and manually resize the viewport.
Steven Parker
231,269 PointsWith devtools open or not, manual resizing stopped at 500. But I was able to get it smaller by "zooming in".
Rich Donnellan
Treehouse Moderator 27,696 PointsIs your dev tools positioned along the side? That's where you're able to selectively resize just the viewport and not the whole browser window.
Sorry; I should have specified that from the beginning.
Steven Parker
231,269 PointsI see now, I always have devtools undocked by default.
Collin Halliday
Full Stack JavaScript Techdegree Student 17,491 PointsHey Harrison.
I did not look at the challenge or lesson you are on, but I did test your code. It worked fine for me in both the Google Chrome and Firefox browsers. However, it would not work for me on the Safari browser. I believe this is because the Safari browser would not allow me to reduce the width of my window below 504px. Your dark-red media query does not kick in until 480px or lower.
I hope that helps. Best of luck!
Harrison Greeves
2,920 PointsYeah I think that's my issue. I'm using Opera and the window doesn't seem to shrink as small as it does in the tutorial. I may fiddle around with devtools for a bit to get it working.
Thanks
mersadajan
21,306 PointsIt works for me if I resize the actual window and don't do it via google dev tools.
here ist my code:
@media all and (max-width: 960px) {
body {
background-color: roayalblue;
}
p {
color: white;
}
}
Rich Donnellan
Treehouse Moderator 27,696 PointsRich Donnellan
Treehouse Moderator 27,696 PointsQuestion updated with code formatting. Check out the Markdown Cheatsheet for syntax examples.