0

some of my media queries are not taking effect. when I go to my inspect panel and adjust the responsive dimensions. they work for 1024px but for them to work for 768px. I have to turn off queries for 1024px. it shouldn't be like that the browser should detect that the width has changed and automatically apply queries for that width but its not happening. I want to know why?

@media screen and (max-width:425px) {

             //code here
}

@media screen and (max-width:768px) {

           //code here
}

@media screen and (max-width:1024px) {

          //code here
}
caramba
  • 21,963
  • 19
  • 86
  • 127
Houston Khanyile
  • 75
  • 8
  • 2
    The order matters. A width of 600px for instance will match the 2nd *and* 3rd rule, and latter rules overwrite previous ones. Either reorder them or use `min-width` conditions instead (this is the usual practice). –  Jan 04 '22 at 10:03
  • 1
    Does this answer your question? [CSS specificity, Media Queries and min-width](https://stackoverflow.com/questions/10306670/css-specificity-media-queries-and-min-width) or [media-query specificity - why is the largest style used when using max-width media queries?](https://stackoverflow.com/questions/33444857/media-query-specificity-why-is-the-largest-style-used-when-using-max-width-med) – caramba Jan 04 '22 at 10:09

1 Answers1

0
@media screen and (max-width: 425px) {
    
}

@media screen and (min-width: 426px) and (max-width: 768px) {
        
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    
}
Anuja Nimesh
  • 408
  • 3
  • 13
  • 1
    Please check for duplicates before posting an answer –  Jan 04 '22 at 10:33
  • @ChrisG what duplicate – Anuja Nimesh Jan 04 '22 at 10:33
  • 1
    The two linked here: https://stackoverflow.com/questions/70576999/why-are-some-of-my-media-queries-not-taking-effect/70577054?noredirect=1#comment124761152_70576999 (99% of new questions are dupes, check and mark accordingly please) –  Jan 04 '22 at 10:34