DEV Community

Foteini Kollia
Foteini Kollia

Posted on

2 1

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

Image of Bright Data

Scale Your Data Needs Effortlessly – Expand your data handling capacities seamlessly.

Leverage our scalable solutions to meet your growing data demands without compromising performance.

Scale Effortlessly

Top comments (5)

Collapse
 
ryansmith profile image
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.

Collapse
 
foteinik profile image
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.

Collapse
 
ryansmith profile image
Ryan Smith

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

Collapse
 
anduser96 profile image
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...

Collapse
 
foteinik profile image
Foteini Kollia

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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay