[Support request] page header element v1.7 IE11 alignment bug

[drew]

I’m noticing that the alignment values aren’t being applied in IE11.

Ex: visit https://unveileddepaul.com/ in anything but IE11 and everything in the home page header hero has the text aligns to the bottom as defined in the new header elements (luv ’em!) but on IE 11, everything is top aligned.

This client is a university and requires admins to use IE11 (I know, I know) so we need to figure out something here. Suggestions?

[David]

Hi there,

IE11 doesn’t play nicely with the flex container used in the page hero – the justify-content rule doesn’t work when the container has a min-height and no fixed height.

I see you added a class to the page hero – try applying a height: 100vh; property to that. If that works then wrap it in a media query so it only effects desktop, or you could have mobile content breaking out the container if its longer than a full screen.

[drew]

That did the trick David 🙂

But is there any word on whether this is something that has a fix without manually adjusting the CSS?

Granted, we all loathe IE for all the right reasons but I do have a few clients (all gvt. and/or university) where they still require staff to use IE so writing manual CSS for those installs tends to become a real time suck.

Many thanks,
Drew

[David]

Thats great.
Well, actually the full height page hero did used to have the height: 100vh property. This was replaced with min-height as it can create issues on smaller screens when the content expands greater than the the screen height.
Ill have a word with Tom whether it should be added back to desktop and tablet size screens…..

[drew]

I appreciate that David!

We all feel the pain when it comes to legacy IE support and I wonder if a dedicated plugin might be a good solution. That way, it doesn’t have to muck up core theme/plugin dev and end users can just jettison the plugin once IE finally fades away.

[David]

Haha yes – i think most people feel the same, and some opt for the Old “Unsupported Browser” pop-up. Many of my ex clients still rely on IE11 to operate, but they don’t generally want Sites as well designed as yours.

I think we can get a workaround that doesn’t mess up mobile views that keeps IE11 looking good.

[drew]

That sounds great, if this is something you want to update here, that’s good, otherwise, I’m fine with marking this as resolved.

[David]

Will keep you posted 🙂

[Author]

Posts