Media queries not working in specific IE query

Question

I am trying to use media queries in only one browser (IE) but nothing I have tried is working.

For example:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Styles go here for IE */
    @media screen and (max-width: 700px) {
        .article {
            width: 100%!important;
        }
    }
 }

I am trying to have a media query that only works for IE and nothing else, but this isn't having any affect. I have also tried:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (max-width: 1320px) {
    div#desktop-nav {
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
}

I added the max-width to the end of the media query.

If anyone has any clue how to do media queries for one specific browser please let me know

Answer 1

It looks like you are trying to target IE 10+, so try using the all selector instead of the screen selector.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS */
}

If you're trying to target IE 9 or below, you'll have to load a conditional stylesheet, like so:

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

You can find more detail about this and other Microsoft browsers here:

how to detect IE and Edge browsers in CSS?