Problem with 100vh
Hello, I have a problem with an animation and would be really grateful if someone could help me.
The link to the page is here: https://clippathsite.webflow.io/
The problem is that on iPhone devices, the bottom bar on the iPhone covers the text located in the bottom right corner of the phone. That text is a description of the image that is displayed and changes during scrolling. The text is visible while scrolling down, but when the user starts scrolling back up towards the top of the page, that bar appears and covers the text because everything is set to 100vh. I’ve tried using dvh and svh, but I haven’t been able to find a solution. How can I move the text upwards above that bar when the user scrolls back up towards the top of the page? I hope I’ve explained it well.
Preview link: https://preview.webflow.com/preview/clippathsite?utm_medium=preview_link&utm_source=designer&utm_content=clippathsite&preview=4e393b3a96b4c90e4eae9d9f581a9a5f&workflow=preview
Everything works fine on desktop; the issue is only on mobile devices.
The link to the page is here: https://clippathsite.webflow.io/
The problem is that on iPhone devices, the bottom bar on the iPhone covers the text located in the bottom right corner of the phone. That text is a description of the image that is displayed and changes during scrolling. The text is visible while scrolling down, but when the user starts scrolling back up towards the top of the page, that bar appears and covers the text because everything is set to 100vh. I’ve tried using dvh and svh, but I haven’t been able to find a solution. How can I move the text upwards above that bar when the user scrolls back up towards the top of the page? I hope I’ve explained it well.
Preview link: https://preview.webflow.com/preview/clippathsite?utm_medium=preview_link&utm_source=designer&utm_content=clippathsite&preview=4e393b3a96b4c90e4eae9d9f581a9a5f&workflow=preview
Everything works fine on desktop; the issue is only on mobile devices.
