Height doesn't properly work on IOS (iphone)

Question

I've created this website on codepen. While trying to make it responsive for all platforms I ran into a problem. It appears a single div covers the whole page (only on IOS) and not all heights are working properly (meaning nothing fits).

I've been at it for days and still have no clue, why all the heights and rules don't apply on IOS.

I've tried removing the video-section which reveals most of the page except the eind section which is just a blank white.

I've tried adding max-height which does reveal some of the other content, but it also seems as if the page can't get any taller on IOS so I'm still limited to a space to work with. Also it doesn't seem a proper solution.

I've tried changing the position but with no avail.

It just seems as if the heights don't properly work on IOS

Can anyone help me figure out why this is happening?

Answer 1

It's not matter of IOS, it's matter of responsiveness. You have set fixed height to each section so it is overlapping with each others on mobile devices.

Just set all section height to height: 100vh.

And

@media (max-width: 430px){
    .introductie {
    height: 300vh;
    overflow: hidden;
}
}

It should works.