Website elements stacked on iPhone 6 (iOS 9)

[ferry]

Hi all,

My landingpage design is looking fine when testing in webflow and in desktop browsers, but when I view it on my iPhone 6 it looks like this. You can check out the live demo here: http://flexa-wireframe.webflow.io/

Anyone that has any idea what’s going on here?

[PixelGeek (Nelson)]

Hi @ferry

Can you please share your read-only link so we can look deeper into the issue?

Share a project's read-only link | Webflow University

Thanks in advance

[ferry]

Hi PixelGeek,

Sure! Thanks in advance.

https://preview.webflow.com/preview/flexa-wireframe?preview=1f865dc3709f894681bc32e09e7504cd

[gadzhi (Gadzhi Kharkharov)]

Hey @ferry,

Flexbox is still not 100% normalized across all the browsers, so you may see some difference in behaviors. There’s currently a bug in Safari (both desktop and mobile): when you have a flex child with %-based Flex Basis inside a flex container with Direction: Column, it shrinks to its minimum height and causes an overflow.

To fix this, just set Sizing: Don’t shrink in the Flex Child Settings on mobile:

[ferry]

Hi Gadzhi,

Thanks a lot for you thourough answer. Will try this in an hour!