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

General Discussion

Posted by Chris Nelson
Chris Nelson
4,978 Points

Not sure why media query not working

I'm following the video at http://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/adding-breakpoints-for-devices

and have put the <link> tags per the video (for the responsive.css filed) on all three html files

    <link rel="stylesheet" href="css/responsive.css"/>

plus the @media queries

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

and the color does not change at all when I resize the screen, unlike what the video illustrates.

I tried adding ' media="screen" ' to the <link> tag but that didn't work either.

I'm using Google Chrome browser.

How can I make the media queries work?

thanks, Chris Nelson

2 Answers

Chris Nelson
Chris Nelson
4,978 Points
Chris Nelson
Chris Nelson
4,978 Points

I think I figured it out. The browser screen wasn't refreshed right. Thanks.

Ben Dietrich
Ben Dietrich
3,604 Points
Ben Dietrich
Ben Dietrich
3,604 Points

Chris Nelson - Is the media query the only rule that is not behaving correctly?

If not, I'd check your file path for the css file.

Chris Nelson
Chris Nelson
4,978 Points

Thanks. I fixed it by opening up a new tab to view the results in the browser. It was a "refresh" issue... :)