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

CSS

Posted by Eric Washington
.a{fill-rule:evenodd;}techdegree
Eric Washington
iOS Development with Swift Techdegree Student 21,884 Points

Help!! Responsive Web Design | Media Queries | CSS (Adding Breakpoints for Devices)

Currently this video on Responsive Web Design and their seems to be something wrong with the workspace or my code.

My code:

@media screen and (min-width: 480px) { body { background: green; } }

@media screen and (min-width: 660px) { body { background: darkgreen; }
}

I tried to preview the changes and nothing happens. Maybe its a glitch or maybe my code is wrong. Someone please help! :(

4 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

That code seems to be fine. Assuming no other css - Below 480px you should see the browser default white background, from 480px - 659px a green background, and from then on a darkgreen background.

As long as you have that code in a css file and you've linked it properly to your html file then it should work.

Maybe it's a workspace problem.

I haven't used the new workspaces feature but I know others have reported problems. You could always try developing locally while the treehouse dev's are getting these issues sorted out.

Eric Washington
seal-mask
.a{fill-rule:evenodd;}techdegree
Eric Washington
iOS Development with Swift Techdegree Student 21,884 Points
Eric Washington
.a{fill-rule:evenodd;}techdegree
Eric Washington
iOS Development with Swift Techdegree Student 21,884 Points

Yea, I think its a workspace problem. Im going to paste my code in Sublime and see what happens. Thank for your help Jason.

Matthew White
Matthew White
9,870 Points
Matthew White
Matthew White
9,870 Points

Just thought it's worth mentioning that I'm having the exact same problem...Sublime it is!

Stephen Clarke-Keating
Stephen Clarke-Keating
1,626 Points
Stephen Clarke-Keating
Stephen Clarke-Keating
1,626 Points

I've just searched the forums looking for someone having the same issue, I've just discovered it myself. I opened the test site in IE and it renders the changes perfectly, but in Chrome, it just applies the navy blue background regardless of the size. I've done some searching and it appears there are issues with the way Chrome can interpret media queries. This seems strange as I'm mainly using Chrome, as is the course tutor on his video, except I'm on Windows rather than OS X.

Then of course as mentioned above it could be a workspaces thing depending on which browser you use. I guess I'll have to try the code locally outside of WS and see what happens.