9

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;
              }
         }
     }
peterh
  • 11,875
  • 18
  • 85
  • 108
Mat Teague
  • 147
  • 2
  • 3
  • 11

2 Answers2

16

instead 

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

use this

@media all and (min-width: 1024px) {
    ... 
}
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
  • 3
    OR because it is min-width 1024 just make the default css for the site and leave off the media query... – Cayce K Sep 26 '14 at 12:32
  • Hi Vitorino thank you for youe help. The query displays in IE11 now thank you. However it doesn't really work as it still applies the styling when the resolution is under 1024px and doesn't show at all when changed to max – Mat Teague Sep 26 '14 at 12:45
  • also change @ media screen to @ media all to the nested one (min-width: 64.000em) – Vitorino fernandes Sep 26 '14 at 12:50
  • 1
    Thanks for your help Vitorino, it now works =D . I had to remove the nested and change screen to all. I hate IE don't understand why only all seems to work – Mat Teague Sep 26 '14 at 13:13
  • Perfect answer. Thanks a lot ! – Pawan Pillai Jun 30 '16 at 02:57
1

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
    //...
}
Moob
  • 14,420
  • 1
  • 34
  • 47