I've noticed that when I view my website on mobile devices, the tablet media queries always seem to override my mobile media queries. Can anyone explain why this is happening?
Here is how I have set it up:
/* X-Small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) {
body .pdf-post-page .postcard-wrapper,
body .pdf-post-page .order-summary-cards .postcard-wrapper {
height: 218px !important;
padding: 10px 10px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
}
}
/* Medium devices (tablets, less than 992px) */ @media (max-width: 991.98px) {
body .pdf-post-page .postcard-wrapper,
body .pdf-post-page .order-summary-cards .postcard-wrapper {
height: 490px;
padding: 30px 30px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
}
}
It seems like the tablet media queries are consistently taking precedence over the mobile phone media queries. Any insights on why this might be happening? Thank you in advance.
I have even tried using the important tag, but it doesn't seem to solve the issue.