the text deeper.

Hey schweg33,
I don’t see your page with the password field, please like to it.

Best regards,
Mike

Hi,
For the page this css will center the elements:

#top.page-id-5923 .template-page.content {
	display: flex;
    height: 90vh;
    align-items: center;
}

But it might cause issues after the password is used if the same page is then used.
The best way to handle this is having a custom class added to the page when the password field is used, that way any style you add is only for the page showing the password field.
So if you are using a password plugin see if the options allow adding a special class to the page, if not ask the plugin author for some code to add a special class to the page when the password field is shown, I would imagine they offer this.

Best regards,
Mike

Hi,
Try:

@media only screen and (max-width: 767px) {
#top.page-id-5923 .template-page.content {
	display: flex;
    height: 90vh;
    align-items: center;
}
}

Best regards,
Mike

Hi,
Thanks for the feedback, I see you have changed it to height: 50vh;
so are you all set then?

Best regards,
Mike

Hi,
Try this css, the first part is the one you like and it is set for portrait, so remove your other css, the second part is for landscape or horizontal.

@media only screen and (max-width: 767px) and (orientation: portrait) {
#top.page-id-5923 .template-page.content {
    display: flex;
    height: 50vh;
    align-items: center;
}
}
@media only screen and (max-width: 885px) and (orientation: landscape) {
#top.page-id-5923 .template-page.content {
    display: flex;
    height: 80vh;
    align-items: center;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike