Media Query Not Triggering

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?

http://codepen.io/keithwyland/pen/yjrhz

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

http://cdpn.io/yjrhz

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.

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!

-TW

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!!

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.

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