CODEWITHSUNDEEP
cssinternet-explorerstylesmedia-queriesresponsive
anna
anna

Reputation: 103

Media queries for Internet Explorer only

I know can get a style for IE only using this CSS:

@media all and (-ms-high-contrast:none) {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: green } /* IE11 */
}

and can make a site responsive using media queries:

@media only screen and (max-width: 800px) {
    .foo { color: green }
}

How do I write the code to make a style for IE only at a certain screen size? Neither of the following is working for me, IE is just ignoring this style:

@media only screen and (-ms-high-contrast:none) and (max-width: 800px)

@media all and (-ms-high-contrast:none) and (max-width: 800px)

Thoughts?

Upvotes: 1

Views: 1549

Answers (1)

anna
anna

Reputation: 103

IE, Safari, chrome & google. For some reason when I use flexbox my divs/columns take up more space on IE than the 3 other major browsers. So I have to specify a flex of 0 0 23% on IE if I want to 4 columns to fit on a page, otherwise the 4th column drops down below the other 3.

Then, when the browser size decreases (eg < 1000px), and I want it to be a 2-column layout, I would have to specify a flex of 0 0 48% on IE (with a flex of 0 0 50% everywhere else).

However, I don't know how to specify a 2 column layout of 48% for an IE screen of <1000px (while keeping it 50% on the other browsers).

Hopefully that makes sense.

Unless there's something I'm missing. I'm relatively new to flexbox so that's possible.

Upvotes: 0

Related Questions