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
}
>Solution :
@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) {
}