iPhone Viewport cut-off - this must be a common issue?

Morning all,

I need assistance with iPhone viewport issues. I have sifted through all kinds of posts, all from 8+ years ago. Some had a similar issue, some had the exact issue. Seems none actually found a fix.

I have developed a site and cannot for the life of me work out why only on iPhone the viewport is cutting off the left of the content. The site works as expected on android, macbook and desktop. I do not have access to an iPad. All completely responsive. When I say “cut-off” I mean you cannot scroll to the left at all.

I tested on an iPhone 8 and thought, ok, it is a bit old, probably just limited to older phones but alas, when I checked with friends on an iPhone X and 11 pro they both had the same issue. It is not an issue in landscape, only portrait.

Please see below screenshots:

Iphone issue where you can see that the content is shifted to the left

Galaxy S10 where you can see the content is centered as expected

As you can see from the above, it is like the phones are readying the viewport size correctly but they are shifting the content to the left. The banner at the top is set to width: 100%; and yet it does not stretch to the far right.

Also, bizarrely it seems that the nav is happily centered but all other content is not.

I am at a loss.

This must be a common issue with an easy fix that just isn’t asked, I hope. I have built this using purely CSS and HTML so nothing fancy.

link to the site

Unfortunately do not have a solution, but thought it was interesting you mentioned iPhone 8, X and 11 Pro.

Here’s how it shows on mine, XS