user1491032 user1491032 - 5 months ago 17
CSS Question

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.

Answer

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