White gap at bottom on mobile plus spacing issue

Design help General
1

Hi all

Two issues:

  • When viewing on mobile, there is a white gap at the bottom.
  • When viewing on mobile, the ‘heading’ text should be equal distance from the bottom and the left side, but it is too close to the bottom. The spacing has been set to 5 VW for both side so I’m not sure why it is unequal.

Here is my site Read-Only: https://preview.webflow.com/preview/test-939871?utm_source=test-939871&preview=04f669d9baff1fb580d1d2f797d8aae8
(how to share your site Read-Only link)

2

Note that it works fine when adjusting the size on a desktop browser, the issues only arise when I publish the site and view it on my mobile device.

3

Also, I have another issue.

I have set the height as 100VH, but when viewing it on a mobile device, it seems longer than that… The ‘Heading’ text is actually below the fold, when I shouldn’t be able to scroll at all.

4

I have fixed the spacing and white gap issue by using CSS Grid. Although I’m still not sure what exactly I was doing wrong the other way I had done it.

I also fixed the viewport heigh issues by setting the top div to 100% instead of 100vh, then I set all other divs underneath is to 100VH. That way each Div is always 100 of the VH.