How adjust div to bottom on Safari iOs Browser?

Design help Custom code
1

Hi there,

At home section, the 5th slide not adjust to the “real view” bottom on mobile safari browser.
How can I solve this? or how to force the browser send to the bottom, in the first slide…

Thanks everyone

Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

2

hii @Fede maybe this will help to solve your request

1 Like
3

Thak you very much @Stan but, not sure if I understand…

Just copy paste this code to the page custom code, but not working…

const appHeight = () => {
 const doc = document.documentElement
 doc.style.setProperty("--vh", `${window.innerHeight}px`)
}
window.addEventListener("resize", appHeight)
appHeight()



:root {
 --vh: 100%;
}
html,
body {
 padding: 0;
 margin: 0;
 overflow: hidden;
 width: 100vw;
 height: 100vh; /* as fallback */
 height: var(--vh);
}
4

hi @Fede I have checked live website on iPad and iPhone and first slide (and all others) are aligned to bottom as expected.

1 Like
5

Hi @Stan, the problemis with the last slide (background green) with a small text at the bottom left. This text is below the browser and should be seen

Thanks a lot

6

hi @Fede vertical snap has always some issues and need more attention to make it work correctly in all browsers on desktop and mobile. Sorry I cant help more but here is video with my opinions but first you should visit official WF page made in Webflow to find some example to study.

Good luck

7

Thanks for everything @Stan

1 Like
8

I had to make second video as first didn’t have a sound. :joy:

1 Like