Media Query in Internet Explorer 11 reading last one

Question

I tried out with some @media query as follows,

@media all and (max-width: 1200px) and (-ms-high-contrast:active), (-ms-high-contrast:none) {
    .breadcrumb.Connect {
        bottom: 176%;
    }
}
@media all and (min-width: 1920px) and (-ms-high-contrast:active), (-ms-high-contrast:none) {
    .breadcrumb.Connect {
        bottom: 181.5%;
        left: -30%;
        width: 160.2%;
    }
}
@media all and (min-width: 1201px) and (max-width: 1919px) and (-ms-high-contrast:active), (-ms-high-contrast:none) {
    .breadcrumb.Connect {
        bottom: 172.5%;
        left: -7.5%;
        width:115.2%;
    }
    div.newsletter-container-connect div.right-form-block {
        width: 43%;
    }
}

Whatever resolution I chosen example 1920px, but the style for that element (breadcrumb.Connect) is overrides by the last rule ((min-width: 1201px) and (max-width: 1919px)).

Answer 1

(min-width: 1201px) and (max-width: 1919px)

This condition applies to widths larger than or equal to 1201px that are also less than or equal to 1919px, i.e. it’s never true. The comma has a lower precedence here than and, though, so (-ms-high-contrast:none) is causing every rule to be applied.