Internet Explorer box size bug

There’s a compatibility issue with Internet Explorer (V.11 and below) on this page: http://canada.webflow.io and this page http://canada.webflow.io/about.

Notice the text coming out of the boxes in Jobs and Values. How can you solve that?

Here’s the preview link:
https://preview.webflow.com/preview/canada?preview=0c9aeae7c4cbce81fbb333347a541be4


Here is my public share link: LINK
(how to access public share link)

Hi @MichealReno

It looks like you’re using flexbox in that element. Try removing it since IE11 doesn’t support flexbox.

More info here:

hope this helps :slight_smile:

Hi @PixelGeek thanks for the link! Yes I knew it was partially supported, but as you can see on the site there’s many other boxes that use Flexbox and there’s no issue there! My question was more what can I do to these boxes to make them work like all the others?

try removing the 100% width:

@PixelGeek thanks. For that Div I simply switched it to Block layout as it had no impact on the design. The other boxes underneath though (the 4 colors) really do need Flexbox for the design to work (centered horizontally and vertically). Any idea how to solve that?

@MichealReno be sure to set a max-width on the text items (setting a maximum width of 100% on text elements should adjust the text to wrap accordingly) within your Flexboxes to account for IE

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.