CSS media queries not being triggered at defined width instead triggered from the next higher resolution media query.

For eg the width from 959px to 974px is supposed to take 730px but end up taking 950px .....the same issue with another specific width 1145 to 1183 ends up taking the larger max-width mentioned outside media query instead of 950px, two specific places where it fails.

.cwidth{
    max-width:1147px;
    padding-left:0px;
    padding-right:0px;
}
@media screen and (min-width: 754px) and (max-width:975px){
    .cwidth{
        max-width:730px !important;
    }
}
@media screen and (min-width: 976px) and (max-width:1183px){
    .cwidth{
        max-width:950px !important;
    }
}

(i have written the queries at the bottom of the style sheet, made sure i have no inline style for the element, also have tried without the !important tag.)

The result required

but the result i am getting

CodePudding user response：

Try using max-width first and then min-width

And no need to use !important property

.cwidth{
    max-width:1147px;
    padding-left:0px;
    padding-right:0px;
}
@media screen and (max-width: 1183px) and (min-width: 976px) {
    .cwidth {
        max-width: 950px;
    }
}
@media screen and (max-width: 975px) and (min-width: 754px) {
    .cwidth {
        max-width: 730px;
    }
}

CodePudding user response：

Try this:

  @media (min-width: 754px) and (max-width: 975px) {
    .cwidth{
      max-width:730px;
    }
  }
  @media (min-width: 976px) and (max-width: 1183px) {
    .cwidth{
      max-width:950px;
    }
  }

CodePudding user response：

It seems to be working perfectly fine when i just increased to a specific interval such as this that I am providing below in code instead of the one i gave earlier:

.cwidth{
    max-width:1147px;
    padding-left:0px;
    padding-right:0px;
}
@media (min-width: 754px) and (max-width:993px){
    .cwidth{
        max-width:730px;
    }
}
@media (min-width: 992px) and (max-width:1199.5px){
    .cwidth{
        max-width:950px;
    }
}

(I just kept on increasing the interval till it aligned perfectly.)