Page sections overlapping position on iPad Safari

My one-page site is broken into different sections. On my iPad running updated Safari, the page sections are positioning over themselves. Tried a few different ideas to fix this, but no luck so far.

Here is my share link.

Images of what I’m experiencing attached, too.

Any help is appreciated! Driving me nuts :slight_smile:

Thanks!

Your top section is set to 100vh. Which means it will always be the height of whatever browser window opens the site. I suggest changing it to auto which will size it to the content.

Thanks for the reply, @DFink.

I do have the navy “landing container” set to 100vh. I want the entire screen view to be navy when you arrive on the page.

Then I have a content container for the landing container. All of my content (the header, text, and animation) go within the landing container. The content container is set to 100%. Therefore, none of the content should go outside 100vh, the viewport height of the screen.

Which is not what it’s doing.

What am I missing here? Thank you again!

That doesn’t really make sense. I am not sure what you are trying to achieve. Are you trying to get the blue background to stay put while the text scrolls over it?