- This topic has 4 replies, 2 voices, and was last updated 3 years, 3 months ago by
Benedikt.
-
AuthorPosts
-
October 2, 2019 at 10:02 am #1024511
Benedikt
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,
BeneOctober 2, 2019 at 4:25 pm #1024755David
StaffCustomer SupportHi there,
are you able to test a Core Block such as an Image Block on a test page to see if the issue persists?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 7, 2019 at 12:52 am #1028051Benedikt
Yeah, those seem to have the same issue. But we found a solution/workaround on the way:
In an IE hack, we implemented the following:
@media all and (-ms-high-contrast:none) div#navigation-block_5c91fd757feac div h2 { width: 200px; } div#navigation-block_5c7ea39a755c1 div h2 { width: 200px; } .navigation.alignfull{ width: 2800px!important; } figure.wp-block-image.alignfull { width: 2800px!important; }
Strangely, IE doesn’t like the automatically calculated margins with the width: auto value. In theory, on a big screen >2800px wide, someone could see the end of the background, but I don’t think that many IE users have wide 30″ 4K screens. 😀
October 7, 2019 at 5:43 am #1028243David
StaffCustomer SupportAwesome – thanks for sharing your fix.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 7, 2019 at 5:47 am #1028245Benedikt
Thank you for the heads up, David! 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.