Section width displays wrong on iPhone 12 and 13, but can not change it

Design help Layout & Design
1

Hallo everyone!

I am having problems with the width of the landing section, but only on iPhone 12 and 13 Pro.

On my Page I have the landing section with the gray box centered. When you open the menu the same layout appears - gray box centered but with different content. Looks good on Android Phones and older iPhones.

But when I open it with my iPhone 13 Pro (or 12 Pro) the gray box in the landing section is being displayed too big and goes out of my viewport on the right side. When i open the menu, the position of the gray box and its content is positioned correct. I build those two sections the same way.

I don’t get it why the gray box in the menu (and the rest of the page) is correct, while the other same gray box in the landing section is wrong.

https://preview.webflow.com/preview/imago-mentaltraining?utm_medium=preview_link&utm_source=designer&utm_content=imago-mentaltraining&preview=5a57256fac83a57829f523bad12453b1&workflow=preview

Can someone help me? Or has any sort of tipp what’s going on?

I tried to put the section width to 100%, 100vw, plus the min and max width, changed the width of the gird, …. but noting changes.
I can only make the box more wide, but I can not make it narrower in any way, not even when I put the width to like 20vw or %.

I hope someone can help me with that bug.
Thank you very much and have a nice day everyone! :slight_smile:

Here is my site Read-Only:

https://preview.webflow.com/preview/imago-mentaltraining?utm_medium=preview_link&utm_source=designer&utm_content=imago-mentaltraining&preview=5a57256fac83a57829f523bad12453b1&workflow=preview

2

You’re adding margin to your .basic-grid while trying to display .round-image-hoch-pferd as a 100vw side-to-side image inside the basic-grid which again, has margin. This isn’t the way to go.

Fix:

  • remove -5vw left-margin from .round-image-hoch-pferd + remove the 100vw from this class or change it to 100%.

Other fix if you want to make the .round-image-hoch-pferd image 100vw:

  • remove the 5vw horizontal margins from the .basic-grid and set it to 0.
  • add 5vw horizontal margins to .round-solid-hoch-menu and set its width to auto.
  • remove -5vw left-margin from .round-image-hoch-pferd.