Gap on iPhone Pro max NEED HELP!

Hello everyone!

I have an issue on my website that is driving me absolutely INSANE! There is a large gap between my hero and my footer only on my iPhone pro max. I have no idea how to fix this and if I try to change something on my mobile settings it messes it up on all other mobile. So its clearly only happening on my iPhone pro. The weirder thing is it looks completely as it should inside Webflow so this is only happening on the published site that is showing on my iPhone. Can anyone help me with this! I will include my read only site.

Also to add things have been randomly vanishing from my site and again its only happening on mobile. for instance the button for my header will randomly disappear, or like yesterday the music player just stopped showing up after publishing but was showing up just fine on all other devices.

Any help would be really appreciated. I don’t know if there is some simple CSS that someone can provide or if for whatever reason its an operator error but I have tried so many different things to no avail.

https://preview.webflow.com/preview/voxstudios?utm_medium=preview_link&utm_source=designer&utm_content=voxstudios&preview=23bc1f318ca3d4f5dfec2eb72948e82f&workflow=preview