Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Media Queries not working in Internet Explorer 11 [duplicate]

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;
              }
         }
     }
like image 982
Mat Teague Avatar asked Sep 26 '14 12:09

Mat Teague


2 Answers

instead

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

use this

@media all and (min-width: 1024px) {
    ... 
} 
like image 79
Vitorino fernandes Avatar answered Sep 25 '22 06:09

Vitorino fernandes


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
    //...
}
like image 31
Moob Avatar answered Sep 23 '22 06:09

Moob