Mobile Responsiveness Full height

Hi Guys, I’m having this issue with a full page design and scroll snap. The intended result is like this website: As you can see the page is entirely in the viewport. When I design mine , I set the min height to 100vh but when I test on my iphone the top bar of the Safari browser and the bottom is covering part of the content of the page on top and bottom. Do you know where am I going wrong? I am new to this so trying to figure out this behavior to make the website more responsive.

Help is greatly appreciated.

This is the page: