CSS media queries not overriding

[amrin]

hello all,

I am trying to make my website mobile responsive, But my media queries aren’t overriding one another. What could be the reason? And also could someone provide me with the most common media-query breakpoints and their ordering …

[Paulie_D]

A brief demo in Codepen.io with the media queries you are using would be more helpful than a general request.

You should be aware however that the order of the media queries is important.

A quick search here will give you the common media queries although you should use these as a guideline only…media queries should be used when your design requires it and not based on devices.

[amrin]

Would the below given media query breakpoints override one another?

/* Extra small devices (phones, up to 480px) /
@media screen and (max-width: 767px) {
}
/ Small devices (tablets, 768px and up) /
@media (min-width: 768px) and (max-width: 991px) {
}
/ tablets/desktops and up ———– /
@media (min-width: 992px) and (max-width: 1199px) {
}
/ large desktops and up ———– */
@media screen and (min-width: 1200px) {
}

[Paulie_D]

Nope you should be fine but a demo of the issue is of more use than raw code.

That said, if the code you have provided is a direct cut and paste…you do appear to have commented out most of the code….that could be it.

/* Extra small devices (phones, up to 480px) */
@media screen and (max-width: 767px) {
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
}
/* tablets/desktops and up ———– */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* large desktops and up ———– */
@media screen and (min-width: 1200px) {
}

See the difference?

[amrin]

oh okay.. also I have realized that the designing changes as per the browser zoom level..is there some way that this can be avoided or stopped?

[Paulie_D]

is there some way that this can be avoided or stopped?

Not really….but without knowing how it breaks and what in your code causes the problem it’s hard to comment.

Again, a brief demo of the issue would be helpful.

[Author]

Posts