Bottom Margin on iOS devices

Hello Community!

I’m super new to this, but I feel like what I’m trying to do should be super easy, but I’m stumped.

I want to create a auto scaling margin around the whole page to act as a constant frame.
I currently using 1% of VH so this scales proportionally to the resolution of the device.

On desktop browsers (safari or chrome on OSX at least), this works as it should.

But it doesn’t seem to work on iOS devices - an iPad or iPhone - safari or chrome.

On the iPhone, it seems as though the VH ignores the navigation bar at the bottom.

On the iPad, I’m not sure what’s going on since the navigation bar is at the top of the browser.

It previews correctly on web flow - here’s the the read only link of where I’m at so far (red body background for emphasis):
https://preview.webflow.com/preview/mats-spectacular-project-b76e53?utm_medium=preview_link&utm_source=designer&utm_content=mats-spectacular-project-b76e53&preview=02136c5c975c3193323683da66f3eb3f&pageId=6034aa07f77280701ec8e86b&mode=preview

But if you go to the actual page, it cuts off the bottom:
https://www.lampedup.com/test

Any help is much appreciated!

thank you!

_Mat

1 Like