Mobile View Different from Webflow Preview

Design help Layout & Design
1

Hi,

I am trying to make my website responsive on Iphone, but there are some issue that I cannot understand.

I am attaching the screenshots of how it appears from mobile and the link to the read-only.

The preview on webflow looks ok, but in the actual website the menu button border becomes squared, there is a non identified gap between the navbar and the first element and the footer overlaps the section.

Could you please help me to identify where the errors are based?

Thanks a lot in advance!

IMG_8814.PNG
IMG_8814.PNG750×1624 37.5 KB

IMG_8815.PNG
IMG_8815.PNG750×1624 45.9 KB

IMG_8816.PNG
IMG_8816.PNG750×1624 46.2 KB

Here is my site Read-Only: [LINK][1]

2

Hey Chiara!

There are 2 things I would recommend checking.

1. Custom code: Since custom code placed in the page & site settings do not render in the designer, this may lead to different results in Webflow vs on the live site.

2. Heights: I’ve noticed you’re using a lot of VH values to set heights on elements - since the Webflow mobile preview is much, much taller than a real phone, this could cause some of the issues you are seeing.

Hope this helps!