Question

I have written media query for 3 different dimensions. Intial style is for 320px width and another 3 query for

1. 320px and above

2. 768px

3. 1024px

   The css is working perfectly for initial size 320px, 320px n above nad 768px. but 1024px css is not applying.

Here is my css query

@media (min-width: 320px) {
For above 320px 
}
@media (min-width: 1024px) {
For 1024px; this is not applying
}
@media (min-width: 768px) {
for 760px
}

Answer 1

The rules in the third media query are always overriding the second one.

You need to swap the order of the last two so that the 1024px will override the 768px when applicable.