Internet Explorer Possible Margin Error

[Kristian73]

I’m creating a new Homepage for my website, using Cornerstone for the first time.

I’ve really been enjoying it and, with browsers like Chrome and Firefox, I haven’t had any issues, but then I noticed that Internet Explorer is causing an issue with one section of the page.

Near the top, under “…festivals beyond Ohio…”, I have 2 rows of 4 counter boxes in each row.

For some reason, Internet Explorer breaks the row after 3 boxes.

Here’s the link - https://ohiofestivals.net/experimental-homepage/

What can I do to keep the boxes in each row for Internet Explorer?

Thank you!

[rad]

Hi @Kristian73,

Thanks for reaching out.

Flex styling is always problematic on IE, since it doesn’t have a standard implementation of flexbox similar to other modern browsers. https://stackoverflow.com/questions/46368886/how-to-make-flex-basis-work-in-ie11

I investigated this and it’s due to flex wrapping from stack CSS. For that, please add this CSS to Theme Options > CSS

_:-ms-fullscreen, :root .x-row-inner {
    flex-wrap: nowrap;
}

Thanks!

[Kristian73]

@Rad

_:-ms-fullscreen, :root .x-row-inner {
flex-wrap: nowrap;
}

That did it! Thanks so much!

[rad]

You’re welcome!