Sidebar in IE11 Breaks Layout

1

Hello! I’m an avid user of Roots but have been running into an issue with my sidebar on a recent website.

The URL is qualityusedequip.com.

I’m noticing that (I think) modernizr is adding a media query for (-ms-high-contrast) that targets IE and effectively breaks the layout:

@media screen and (min-width:768px) and (-ms-high-contrast:active),(-ms-high-contrast:none){
    .sidebar{
    float:right !important;
    width:340px !important;
    position:absolute !important;
    right:-390px !important;
    top:0px !important}
}

Wondering if anyone knows a potential fix?

Thanks!

2

AFAIK this isn’t really possible. Modernizr is more of a yep/nope system and would not be able to affect your CSS in such a way. I also can’t find any reference in Modernizr docs to this particular IE feature.

I noticed that the first instance in your CSS starts where I believe the bootstrap concat ends:

.no-padding {
    padding: 0 !important;
    margin: 0 !important
}

.container {
    -webkit-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s
}

h1 {
    font-family: "Oswald", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color: #00355f;
    font-size: 26px
}

.page-template-template-process-php h1 {
    text-align: center;
    font-style: italic;
    margin: 40px 10px;
    font-size: 35px
}

@media screen and (min-width:768px) and (-ms-high-contrast:active), all and (-ms-high-contrast:none) {
    .sidebar {
        float: none !important;
        width: auto !important;
        position: relative !important;
        right: auto !important;
        top: auto !important
    }
}

So I would make sure you didn’t miss anything in your global.less since that is the first file added after bootstrap CSS.

If you want to post that code I would be happy to evaluate it.