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
Top comments (5)
I don't have an iOS device to view on, are you able to add a screenshot?
I have heard that
vhunits 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.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.
You're welcome, I hope that leads to solving the issue.
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...
Wow, this seems indeed a great resource and I will definitely check it! Thank you!