Streaming live at 10am (PST)

Website elements stacked on iPhone 6 (iOS 9)


#1

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?


#2

Hi @ferry

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

http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Thanks in advance :smiley:


#3

Hi PixelGeek,

Sure! Thanks in advance.

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


#4

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:


#5

Hi Gadzhi,

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


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.