Password Field Not Centered

Background
I created my Webflow website (read-only Designer link) about a week ago.

Problem
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

Observed Behavior — Content is NOT Centered Vertically in the Viewport

Steps I’ve Taken
I have verified that the container for the content is set to be centered vertically via flex box (see below)

I appreciate any help you can provide with resolving this issue!

Thanks,

Jason

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.

found on this forum
https://discourse.webflow.com/search?q=100vh%20mobile

on internet

Thanks @Stan for your reply! You mentioned:

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 :slightly_smiling_face:. After all, the home page of Webflow states:

Webflow empowers designers to build professional, custom websites in a completely visual canvas with no code.

Hi @sportsedan89 I have already wrote many clarification about meaning of marketing line “no code”. In other words all no code platforms require knowledge of coding to be able use their whole power. :wink:

If you do not have further question related to original topic feel free to close your request as solved.

Thanks again,@Stan, for pointing me in the right direction.

After trying several approaches I read about online, I ultimately found one that worked for me in an article called The trick to viewport units on mobile.

glad to see you have found solution on your own

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.