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

Media Query Not Triggering

For the life of me I cannot get my media query to trigger on my site I'm building. I'm going off of the responsive design lessons on the site, but when I resize my browser, nothing happens. I have this in my head tag:

<link rel="stylesheet" media="screen" type="text/css" href="CSS/style.css">

and this is the media query I'm trying to get to simply change the background color of class of divs when the screen is smaller than 480px:

@media screen and (max-width : 480px) { 

 .box {background-color: blue;  }

Why won't this work?!

11 Answers

Hmm. there may be more to this. Perhaps your div does not have a width or height assigned to it and there is no content in it, so there is nothing to display a background-color on? Hard to tell without a little more context.

Here's a codepen of the CSS working. I added some CSS for .box to give it a height and width and initial background-color. Does this help?


Here's the fullpage version, so you can size your browser down.


Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Thomas Wright,

Your syntax seems correct––all works well in the jsFiddle as you can see: http://jsfiddle.net/wuvve/1/

Is your style sheet in a folder named "CSS"? Or as Keith mentioned, does your div have a height or any content?

Yeah, I can see that working. Hmmm... I just cannot figure this out. The div has a defined height and width:

.box {

height: 8em;
width: 23%;
background-color: black;
margin: 0 0 0 0;


and everything else lines up. But, the sucker will not change when I resize the screen. I've tried changing the names in the head tag and moving the media="screen" to different places. Nothing happens when I resize. But, I see how simple this should be. Anyone ever experience this before? It's really got me stumped. What would cause a media query to not work at all?

When I select the .box class in the CSS separately outside of the media query it changes the box to blue. So, I know the problem is with the media query.

I'm using the 960 grid system currently. Maybe that's causing some problems because of the reset that is included.

James Barnett
James Barnett
39,199 Points

Thomas Wright - Sounds like a file path issue, check out this primer on file paths

I found it!

It was a stray curly bracket directly above my query that was essentially cancelling in out. Wow... that's two hours I'll never get back.

Thanks, everyone!


Perhaps it's the order of your CSS rules? In your style sheet, does your media query come after the non-media query rule?

Other than that, all I can currently think of is possibly a missing curly brace further up in your style sheet, or a missing semi-colon.

Glad you found it!!

James Barnett
James Barnett
39,199 Points

Thomas Wright -

Wow... that's two hours I'll never get back.

That's a rite of passage for every new coder.

A large part of liking programming, is enjoying spending hours hunting for misplaced punctuation or at least enjoying the feeling after you squash the bug.

It's a pretty great feeling! Whew... thanks again.

James Barnett
James Barnett
39,199 Points

Thomas Wright - You've got to watch out bug squashing can become habit forming :wink: