Media Query Not Firing - html

Question

The Goal
The goal is to be make the grid system boxes amount per row change based on screen size. Here is an example
Screen Size Boxes Percent Width
1250px 3 33.3
750px 2 50
500px 1 100
Current Progress
I have created the grid system and the media queries
/* Max Width 1250px */
#media screen and (max-width: 1250px) {
.boxes {
width: 33.3%;
}
}
/* Max Width 750px */
#media screen and (max-width: 750px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
The Problem
I current have the media queries that work at 750px and 500px however it skips the 1250px. Not sure what the difference between the 750px and the 1250px? Why it not working?
JSFiddle - https://jsfiddle.net/6k2Lkm2f/1/

Answer 1

I've had a similar problem before.
You should use both min-width and max-width to set lower and upper bounds respectively.
Also your first two are redundant. Both give the .boxes class a width of 50%. It would be better to combine them into one, that serves both viewpoints
/* Max Width 1250px */
#media only screen and (min-width: 501px) and (max-width: 1250px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media only screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
Using the above syntax is a great way to prevent confusion.
Edit: Media queries only work on ie9 and above. If you are using an older browser, the above will NOT work.
Second Edit: It looks like in media queries you need to add only before the type. For example
#media only screen instead of #media screen