CODEWITHSUNDEEP
cssmedia-queries
Digital Essence
Digital Essence

Reputation: 319

Only one media query working

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; 
    }
}

Upvotes: 2

Views: 5794

Answers (4)

Bartosz Górski
Bartosz Górski

Reputation: 1160

Try using min-width in one of your queries, so it becomes:

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

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

Upvotes: 0

Sean Vieira
Sean Vieira

Reputation: 159945

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;
    }   
}

Upvotes: 5

Ash
Ash

Reputation: 1649

This is because of the ordering in the media queries in CSS. Either change the order or Try to put !important over Use this one http://jsfiddle.net/fidrizers/8Pmuw/

Upvotes: 0

Roy Stanfield
Roy Stanfield

Reputation: 46

If you are using a normal desktop browser you may not be able to make it smaller than 100px. Try increasing your test widths to larger sizes like 500px and 1000px.

Upvotes: 2

Related Questions