CODEWITHSUNDEEP
htmlcssmedia-queries
lufc
lufc

Reputation: 2040

CSS multiple @media (min-width) not working

hopefully a very simple question.

I have three @media (min-width) statements starting at mobile and building up to desktop. For some reason, the third statement doesn't fire.

Example: .imgbox {height: 100px; width: 100px;}

@media (min-width: 768px) and (max-width: 899px)  { .imgbox { background-color:red; } } 

@media (min-width:900px) and (max-width: 1000px) {
        .imgbox { background-color:green;}
}​

@media (min-width:1001px) {
    .imgbox { background-color:blue;}
}​

JS Fiddle to show effect here: https://jsfiddle.net/t5vh316h/ (drag the centre divider to different widths in order to see what I mean)

The box never turns blue, the final query seems to be ignored. Why?!

Thank you.

Upvotes: 0

Views: 1281

Answers (3)

Rion Williams
Rion Williams

Reputation: 76547

You seem to have a special character following your existing closing braces as highlighted in your JSFiddle :

enter image description here

Simply remove those trailing characters as seen below :

.imgbox {height: 100px; width: 100px;}
@media (min-width: 768px) and (max-width: 899px)  { .imgbox { background-color:red; } } 
@media (min-width:900px) and (max-width: 1000px) { .imgbox { background-color:green;} }
@media (min-width:1001px) { .imgbox { background-color:blue;} }

Which should resolve the issue :

enter image description here

Upvotes: 6

David Lai
David Lai

Reputation: 822

It turns out you had some garbage unicode character #8203, after removing it, your fiddle worked.

https://jsfiddle.net/t5vh316h/5/

@media (min-width:900px) and (max-width: 1000px) {
        .imgbox { background-color:green;}
}​​

Upvotes: 0

Richard Hamilton
Richard Hamilton

Reputation: 26434

The problem was unecessary dots after your media queries. I've updated your fiddle

https://jsfiddle.net/t5vh316h/4/

.imgbox {height: 100px; width: 100px;}

@media (min-width: 768px) and (max-width: 899px)  { 
   .imgbox { background-color:red; } 
}   

@media (min-width:900px) and (max-width: 1000px) {
    .imgbox { background-color:green;}
}

@media (min-width:1001px) {
    .imgbox { background-color:blue;}
}

Upvotes: 0

Related Questions