Media query on Internet Explorer 11

BB Theme
1

Hi,
I have used a media query to get a slightly different header than standard:

@media (min-width: 990px) {
     .fl-page-header-primary {
          width: 980px   ;
     }
  
@media (min-width: 1200px) {
   .fl-page-header-primary {
          width: 1100px   ;
    background-color:blue;
     }

The background-color:blue statement is just for testing. The first of the two media queries work on both Chrome and Internet Explorer. But the second one is not working on IE, so it keeps the settings of the first one.

Any suggestions why this could be/how to change this?

Thanks

Pieter

2

Mysterie!
After adding a max-width to the smaller media query, nothing changed. I then reversed the order and it worked. When I reversed the order back it still worked:

@media screen and (min-width: 990px) and (max-width:1199px) {
     .fl-page-header-primary {
          width: 980px   ;
         background-color:red;
     }
}
@media only screen and (min-width: 1200px) {
   .fl-page-header-primary {
          width: 1100px   ;
    background-color:blue;
     }

This turns red and blue depending of the size of the window.

3

Hey Pieter,

I see that your code above is leaving out a close curly bracket. It should look like the below. Do you mind telling us a little bit more a on what you are trying to achieve?

@media screen and (min-width: 990px) and (max-width:1199px) {
     .fl-page-header-primary {
         width: 980px;
         background-color: red;
     }
}
@media only screen and (min-width: 1200px) {
    .fl-page-header-primary {
         width: 1100px;
         background-color: blue;
    }
}

Thanks!

KC

4

Thanks KC, that must have explained the issue IE had with it. I want to have a fixed top bar that does not span the whole width. If you set the Theme option to fix the header, it goes across the whole page, so I did not use it. It works now. Here is the full CSS:

@media (min-width: 768px)  {
  .fl-page-header-primary {
    position: fixed;
    z-index: 999;
    margin: 0 auto;
    width: 980px;
     
  }
 body .fl-page-content {
    padding-top: 98px; /* The height of the header on medium devices*/
  }
}

@media screen and (min-width: 990px) and (max-width:1199px) {
     .fl-page-header-primary {
          width: 980px   ;
     }
}
@media only screen and (min-width: 1200px) {
   .fl-page-header-primary {
          width: 1100px   ;
  
     }
}

Thanks!

5

Hey Pieter,

Thanks for sharing and I’m glad that worked for you. Enjoy BB and let us know if you need anything further! :slight_smile:

Thanks!

KC