Website looks different on iPhone and Android

Community resources
1

Hello there! I have an an issue where my Webflow preview completely matches with what I see on Macbook 13 inch as desktop version when I publish the website, which also is case on my Android phone. Looks just like the preview. However on my iPhone, it looks messy, some sections overlap etc. It looks unoptimized. If I go in Webflow and make it suit iPhone it looks terrible in webflow and android with enormous gaps. I almost all the time use VH as height for sections.
Also, one thing I couldn’t sort out neither on android is big gap under Crew section which isn’t there in Webflow.

Here is my read only link: https://preview.webflow.com/preview/utopiayacht?utm_medium=preview_link&utm_source=designer&utm_content=utopiayacht&preview=7c9ea79f8defe6393798d62cddd7738b&pageId=60a277def5cb4de9796198b7&mode=preview

2

I am experiencing the same issue. In the Designer my site looks fine, but when I view it on iPhone the two grid sections are positioned over the elements above.

Read only link: Read-only - NHE Revision
Published site (to see issue on smartphone): https://nherevision.webflow.io/

I have tried rebuilding the section, but nothing seems to fix the issue.

Does anyone have an idea, what could be causing this?

3

What actually was a problem is that sections height needs to be set on auto and it was vh for me.

4

I just changed the display mode from on the container and now it’s working… But thanks for the response!