Help - I have this white space only on iPhone

Hi, I have designed a website for a friend. Everything is working fine, the only problem I have is on viewing via iPhone, I have white space between the first and second section - but like I said only on iPhone.

Please can someone help me - website is www.dukesyscoaching.uk

Thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Chris!
Please add your project’s read-only link so we can help :slight_smile:

https://preview.webflow.com/preview/dukesy-coaching?utm_medium=preview_link&utm_source=designer&utm_content=dukesy-coaching&preview=69e8fa24295b2d92d6d89c2074fbdc49&workflow=preview

Hey Chris – it might be because you’re specifying heights for each section? Try taking them off and letting the content + padding dictate the height of the sections?

1 Like

Strange and inexplicable display issues have been known to occur on iPhones when everything looks fine on all other devices. It’s pretty cursed. I ran into this a while back with a lottie animation I had wrapped in a div with overflow hidden; it kept bleeding out of the bounding box anyway, but only on iPhone. No one knows why, and the issue isn’t very well documented.

BUT I don’t think that’s what this is. I think it’s the margins on this container. Instead of margins, try using padding instead of margins and see if that helps. When you do, you’ll see that the sections are flush with one another again.

with margins:

with padding

I’m inclined to agree with @Tom_Derrett

I get a very tall gap between the About and the WTPS sections on my Sansung phone.
And when resizing, for smaller devices, the text overflows, which is typical of having a set height.

I suggest giving some top and bottom padding if you want to create some space. And, if necessary, use a min-height on the text sections

Some random settings: