Why my website doesn't display properly on iPhone 5s? What can I check in order to fix this issue?

Hello, fellow devs!

So, the last month I've been building a site for my uncle. This is the first big project I've ever worked on.

I've been using mainly flexbox since it is now almost fully supported.

I sent it to some friends of mine to check it in their iPhones(on all browsers), and unfortunately, the site didn't display properly at all!

It shows only the header and the hero section right after the header, and it needs to scroll a lot to see the hero section's content.

I tried several things to fix it and unfortunately "spent" some free trials on browser-testing sites with no result :(

I also used the online Autoprefixer (which is an awesome tool, btw), but there was still no difference.

I really don't know how to proceed and what to change in order to fix the problem.

The site on code pen:

If you have any idea, please share your thoughts!

Thank you

Comments

[Ryan Smith]

I don't have an iOS device to view on, are you able to add a screenshot?

I have heard that vh units work differently in Safari on iOS, which are used in your CSS. I think it is worth a try to use a different unit and see if there is any difference.

[Foteini Kollia]

Thank you very much for pointing in some direction! I searched about that a little and found this, where there is a discussion about this issue and potential solutions.

[Ryan Smith]

You're welcome, I hope that leads to solving the issue.

[Andrei Gatej]

Hi! I’m not sure this will solve your problem, but I also had some issues with how my website is displayed on iOS devices and this seemed to be useful: developer.apple.com/library/archiv...

[Foteini Kollia]

Wow, this seems indeed a great resource and I will definitely check it! Thank you!