mobile view media queries override by my tablet media queries. why?

Question

When i'm on mobile view, tablet view media queries always override my mobile media queries. Why is this happenning?

this is how I added.

/* 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);
}

}

This tablets media quieries alwys override my mobile phone media queires. Any reason? Thanks in advance.

enter image description here

I tried by adding important tags, but it will affect the otherway.

Answer 1

Make sure that you are making responsive of your website in Descending order eg(1200px, 900, 700). If this does not solve your issue you can add !important at the end of your css property. Thanks.