Issue
I have the following media queries in my CSS.
I have noticed that they are not acting correctly and some are being overwritten by others. What is the correct order for this? What are the rules for media queries and order?
1) @media screen and (max-width:767px) {
2) @media screen and (max-width:992px) {
3) @media screen and (max-width:1000px){
4) @media screen and (max-width:480px){
5) @media screen and (max-width:580px){
6) @media screen and (max-width:632px){
7) @media screen and (max-width:1170px){
8) @media screen and (min-width: 650px){
9) @media screen and (min-width: 993px){
10) @media screen and (min-width:992px) and (max-width:1199px) {
UPDATED QUESTION:
Is it incorrect to use both min-width and max-width?
Solution
Your html/browser/etc.. read the css like a batchfile, from beginning to the end.
the last hit/match in a css file always overwrites the previous one
if you got this and your screen size is 700px:
Order 1:
@media screen and (max-width:767px){}
@media screen and (max-width:992px){}
you will get the media of max-width:992px now
Order 2:
@media screen and (max-width:992px){}
@media screen and (max-width:767px){}
you will get the media of max-width:767px now
This is your correct order:
@media screen and (max-width:1170px){}
@media screen and (max-width:1000px){}
@media screen and (max-width:992px){}
@media screen and (max-width:767px){}
@media screen and (max-width:632px){}
@media screen and (max-width:580px){}
@media screen and (max-width:480px){}
I make the example with out the min media
If your size is now 1171px your html/browser/etc.. will take/read the standard style of your css(outside the media queries), but again from the beginning to the end.
Check this too:
Responsive Web Design - Media Queries
Answered By - Blockchain Office
