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

Question

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.

Entire code can be found here in my previously unanswered post which had a little less detail.

link to the site

Answer 1

For anyone in the future looking into this or a similar issue, it seems that iPhone's have challenges interpreting

---

tags. This is not limited to Safari as I tested the code on Opera and firefox on an iPhone 8 and iPhone X and the same issue occured.

Not only did the CSS applied to the

---

tag not take effect on the iPhone but it created some form of break in the page entirely.

---

tags are a little outdated as I understand however it added a nice aesthetic. Instead I created the same visual effect by entirely removing the

---

tag and using bottom-border on the SVG.

I hope this helps someone in the future.