Question

totally new to media queries and responsive design and I’ve fallen at the first hurdle.

I have the following:

@media only screen and (max-width: 100px) {
    #wrap {
            background: #F00;
    }   
}

@media only screen and (max-width: 500px) {
    #wrap {
            background: #224466;
    }           
}

And only the max-width: 500px works in that as I reduce the screen down it changes to the first colour, but as I reduce it further down to below 100px nothing else happens.

Where have I failed?

thanks

SOLUTION:

For anyone else with the same issue, here is the answer as provided by Sean Vieira.

The cascade still applies to active media queries so swapping them around resolves the issue) I also increased it from 100px as suggested by Roy Stanfield as the desktop browser might not go that small.

@media only screen and (max-width: 800px) {
    #wrap {
            background: #224466;
    }     
    .entry-title {
        font-size: 2em; 
    }
}

@media only screen and (max-width: 400px) {
    #wrap {
            background: #F00;
    }   
    .entry-title {
        font-size: 1em; 
    }
}

Answer 1

The cascade still applies to active media queries (if I understand it correctly). If you look at what you wrote without the media queries, the problem becomes more evident:

#wrap {
        background: #F00;
}

#wrap {
        background: #224466;
}

Switching the order should fix the problem:

@media only screen and (max-width: 500px) {
    #wrap {
            background: #224466;
    }           
}

@media only screen and (max-width: 100px) {
    #wrap {
            background: #F00;
    }   
}