CODEWITHSUNDEEP
cssmedia-queries
user13286
user13286

Reputation: 3075

How to target IE10+ and a specific screen size?

I need to add some IE10/11 specific styling, but I only want it to happen on screen sizes of 768px+

I tried the following:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    @media (min-width:768px) {
        /* STYLING HERE */
    }
}

But this doesn't seem to work. If I remove @media (min-width:768px) the IE specific styling works, but then it display at all screen widths. How can I combine these media queries so that the CSS is only applied on IE10/11 for devices with a minimum width of 768px?

Upvotes: 0

Views: 189

Answers (1)

user13286
user13286

Reputation: 3075

Combining the 2, as below, seems to work. Any issues with this?

@media all and (min-width:768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* STYLING HERE */
}

Upvotes: 1

Related Questions