Media Queries not working in Internet Explorer 11 [duplicate]

Question

This question already has an answer here:

• Nesting @media rules in CSS 1 answer

Hi guys I am currently creating my portfolio website in WordPress at www.yewtreeweb.co.uk. However I am having a problem with getting media queries to work in Internet Explorer 11.

When I add the media queries the style does not display in the inspect element console of Internet Explorer however BootStrap's media queries do appear. Is it something to do with WordPress or am I doing something wrong?

Also my styling does work if out of the media query.

@media screen and (min-width: 1024px){
      @media screen and (min-width: 64.000em){
            #imgholder-left{
                padding-right: 0;
             }
            #imgholder-right{
                padding-left: 0;
             }
             #leftimg > img {
                 width: 400px;
              }
              #rightimg > img {
                 width: 600px;
              }
         }
     }

Answer 1

instead

@media screen and (min-width: 1024px){
    ...
}

use this

@media all and (min-width: 1024px) {
    ... 
} 

Answer 2

Although nested media queries are allowed in CSS3 (but not 2.1) I can imagine that this is exactly the sort of thing that has cross-browser issues.

I don't understand why you are testing min-width twice but consider putting them in the same query, comma-separated to signify an OR:

@media screen and (min-width: 1024px), screen and (min-width: 64.000em) {
    //if *either* of these are matched then apply these rules
    //...
}