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

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

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

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.

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