Media Query Order not working, need to understand order rules-CodePudding

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?

CodePudding user response：

the order of media queries is important. according to bootstrap breakpoint documentation the order of media queries is shown below.

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

CodePudding user response：

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

Using media queries

CodePudding user response：

Try it with only

@media only screen and (max-width: 975px) {}

To learn all related rulse and info about CSS Media Query, visit https://developer.mozilla.org/en-US/docs/Web/CSS/@media

If the same element is in more than 1 Media Query, Then The most important rule is:

if you scale from small screen to big, then small Query will apply first.

if you scale from big screen to small, then big Query will apply first.