When I access my password page on a tablet or smartphone, the content is not centered vertically in the viewport (see screenshots below of expected and observed behavior). (Note that the content is properly centered vertically in the viewport when I view the website on a desktop web browser.)
Expected Behavior — Content is Centered Vertically in the Viewport
Hi @rstuart and welcome to this forum. Here are some sources to help you understand how to fix your issue. There may be also some troubles as you are also applying Flex on body element and you have to have really good reason to apply any styling to body.
you have to have really good reason to apply any styling to body.
What’s the reasoning behind this?
I read through the two posts you shared as well as the posts at this forum link, but I unfortunately still haven’t been able to find a solution to this problem. It’s good to know, though, that others are experiencing the same issue, and my hope by raising it here is that Webflow will eventually implement a solution that eliminates the need for hack-like fixes.
hi @sportsedan89 to body Q: Common practice is creating main page wrapper to wrap page content and there is several reasons why. feel free to search internet to find why is this better solution. I have only mention it as hint to prevent other issues you may facing when use style on body but of course is up to you what approach you will practice.
to 100vh Q: it is not WF issue but how mobile browsers understand 100% of viewport height (100vh). I have checked your live page on mobile (iOS) and protected page is scrollable. I have send articles that explain this issue with possible solution(s).
Thanks! Yep, I get that the 100vh issue is a mobile device/browser thing, but my hope is that Webflow can create a nice solution for it to save the website builder the trouble of using custom code . After all, the home page of Webflow states:
Webflow empowers designers to build professional, custom websites in a completely visual canvas with no code.