Hey guys!
A client site I used a while ago, has a weird behaviour in IE11, and unfortunately, the client uses mainly IE 🙁
Most of the elements look fine, we have some objects which use the Gutenberg .alignfull class, i.e. scale to full width while maintaining the content in the site’s content width.
Now, the .alignfull uses the following code:
.no-sidebar .entry-content .alignfull {
margin-left: calc( -100vw / 2 + 100% / 2 );
margin-right: calc( -100vw / 2 + 100% / 2 );
max-width: 100vw;
width: auto;
}
Which seems to lead to the IE not interpreting the elements’ width correctly and producing this:
Wrong display
(the two elements normally should be full width and sit below each other.
After a good time of investigating, we found out that maybe it has something to do with the IE interpreting the calc term wrongly – see here: Stackoverflow
Do you know anything about that? The calc css code clearly comes from the Generatepress parent theme, so I really hope you can help.
While I know that IE support is really hard to maintain, here we are forced to do so because the client uses it quite extensively.
I appreciate any help!
Kind regards,
Bene