Vertical Align Elements not working on Edge/IE

[eternalbeta]

Hey guys —

It looks like vertically aligning elements isn’t working on Edge and IE. Confirmed that it works in other browsers. Just check the top section on the site I linked as an example. If you can think of any ways to fix this or work around it that would be great. It seems like the Microsoft browsers are not even recognizing the css exists.

Thanks

[David Martin – Support]

Hi,

Thanks for reporting this, could I ask what browser version and OS/OS version you are using?

Could you please attach a screenshot of what you see?

Thanks,
David.

[eternalbeta]

This reply has been marked as private.

[David Martin – Support]

Hi,

This is caused because the class flexbox is not added to the body class by the Modernizr JS library. Upon testing this further, Flexbox appears to be working with the Edge browser.

I’ll need to run this past Ed (lead dev) and get back to you with a positive resolution.

[eternalbeta]

Any word on this yet guys? This is for an in-development site that is launching at the end of the month. Is there anything we could do even for a temporary fix?

Thanks.

[Rui Guerreiro – SUPPORT]

Apologise for the delay will send a direct message to Ed so he can reply you.

-Rui

[Swift Ideas – Ed]

Apologies for the delay, and thanks for the heads up with this issue. Please can you try adding this CSS, and we’ll include it in the next update:

.spb-row[data-col-v-pos="center"] > .spb_content_element {
	top: 50%;
    transform: translateY(-50%);
    position: relative;
}
.flexbox .spb-row[data-col-v-pos="center"] > .spb_content_element {
    top: auto;
    transform: none;
}

Let us know.

– Ed

[eternalbeta]

Thanks Ed, that seemed to fix it on Edge.

[Swift Ideas – Ed]

Great, we’ll include that in the next update. Marking as resolved.

– Ed