Hello!
I’ve recently finished a site build but I am having a few problems with the display on my iPhone. There were issues in quite a few sections where the content seems to be overlapping into other sections’ content.
Before I posted here, I tried to find some answers myself looking through past forum posts. Most of these issues are a few years old and were related to flexbox, particularly people using flex-shrink on sections of content when they should have used flex-grow. Turns out I had flex-shrink on quite a few of my divs, so I switched them all to flex-grow, but the display problem persists.
Curious what I’m missing since otherwise, my page layout seems to be pretty simple. I’ll attach an image so you guys can see what’s happening on my end. For the record, I did check the same site on my girlfriend’s Galaxy phone and none of this weird stuff is happening. It seems to be a recurring issue with iPhones… hmm.
Here are a few screenshots of what I’m seeing:
Thanks in advance for any help you all can offer!
@Waldo @PixelGeek
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
@MKDWebSolutions Looks like you are using 100VH and at the same time have pixel sizing.
If that is the case remove the 100VH on mobile breakpoint
Thanks for the reply Janne, I tried this and it did not work. Do you have any idea why this issue might be happening?
Does anybody know what’s going on here? I’ve never experienced an issue like this before. It’s so weird because almost every other forum post I’ve seen about the issue points to flexbox. All of my containers in the section are set to flex-expand, so I’m stumped here. If somebody could take a look that’d be awesome! I’d like to deliver this site today but I don’t want to hand-off with a display bug. Thanks! 
I have seen this with background video and 100VH. Are you using BG Video?
No, nor am I using 100vh for anything, the heights of my divs and sections are all set to auto, no background video, no complex interactions. Please, take a look at my shared link if you’d like.
Will have some dinner now. Can take a look at your code efter dinner. OK?
Fair enough, haha. Enjoy your dinner!
@MKDWebSolutions wish page? is it the same in the studio or only the phone?
I’ve solved it, turns out I had the parent container “section” flexed when I didn’t need to. Once I removed flex from the parent container it fixed everything.
