Media Queries Nonfunctional

Question

Posted this over on Code Review initially because I was hoping to get some feedback on my CSS generally--which feels bloated to me--and I was told it belonged on Stack Overflow because I have a problem with nonfunctional code.

I've recently spent 9 hours building a site, my first time touching code in a few years, and even then I was never much good with it. I worked with a mobile-first approach in mind, but after building the basic site, I tried to implement media queries to get the site working well on larger screens and . . . well, my media queries flat-out have NO effect. As far as I can see from examples, I've formatted them correctly, but they produce no results at all.

This is a jsfiddle that contains the relevant content.

http://jsfiddle.net/LuGXP/

And the media query in question . . .

@media (min-width:480 px) and (max-width:960 px) {
body {
background:red;
}
}

Right now, I have it set to the very simple (and would-be eye-searing) change there just to test that it's responding to the media query at all. My actual goal would be to have the layout go from single-column at mobile device widths to dual column, then entirely horizontal, with a slight font-size increase at larger sizes.

Caveats:

1) I realize the code is likely very bloated. I want to address that at some point, but I figure it makes more sense to handle an actual pure functionality issue first and then take it back to Code Review.

2) There are some lines of CSS that probably don't make much sense with the index page. These pertain to the other linked pages, which share similar layouts.

If any more information would be useful, let me know.

Answer 1

Looks like a typo: http://jsfiddle.net/LuGXP/2/

BAD

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

GOOD

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

There shouldn't be a space between the value (480) and the unit (px).

It's usually good to work with the minimum code when trying to troubleshoot a problem. In your case, most of the code in your example is unneeded.

To that point, here's a stripped down example: http://jsfiddle.net/LuGXP/3/. As you might guess, this will turn the background red when the body is between 480 and 960x wide.

body{
    background: green;
}

@media (min-width:480px) and (max-width:960px) {
    body {
        background:red;
    }
}