Mobile layout on phone differs from Mobile design

Design help General
1

Hi there,

I am encountering some issues with a few sections on some pages where I am having to design them on the editor to have way more margin/section space in between to compensate for the mobile view and it still is not laying out correctly. When I begin to design them as they should appear on my computer (while editing in Mobile view) they look good then start overlap/cut off.

Can anyone share any advice.

Screenshot 2024-08-20 195339
Screenshot 2024-08-20 1953392923×1995 439 KB

IMG_3486.PNG
IMG_3486.PNG1290×2796 116 KB

My site is connect23.ca

2

https://preview.webflow.com/preview/connect-23-c63914?utm_medium=preview_link&utm_source=designer&utm_content=connect-23-c63914&preview=feccd7aadb57684a8eb40e4f68356ff9&pageId=664ba3fe2ddb87727ffde5ef&locale=en&workflow=preview

3

Any insight here would be helpful. I am viewing from an iPhone 15 Pro Max.

4

Looks like you are setting a height to a few containers and then the content is overflowing past that height. Changing the height to auto will make sure it adjusts.