Password Page needs centering

[OCEANL]

 

Hello!

I need help centering the logo and "Enter using password". I want everything centered with the logo at the top and the password below. I can't seem to change it anywhere using the Spotlight theme.

[StevenDunneDev]

You would need to edit the CSS for the header in your theme code. I would approach it using a flex-box column. Hope that helps

[OCEANL]

Hello Steven,

Not sure how to do that? Can you assist? 

[StevenDunneDev]

Sure, whats your store URL?

[OCEANL]

Hello @StevenDunneDev 

Thank you!

The URL is https://oceanlhane.com/password

Password: peempe

[StevenDunneDev]

Hey @OCEANL 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.password-header {
display: flex;
flex-direction: column;
}
</style>

If that doesn't completely solve it for you, show me how it looks and we can add more code to dial it in.
Alternatively DM me a collaborator password and I can jump in and do it for you

[BSSCommerce-B2B]

Hi @OCEANL ,

open your file css and insert below:

.password-header {
    display: flex !important;
    gap: 0px !important;
}

here is result:

mobile

desktop

[BSSCommerce-B2B]

If you also want the 'Enter using password' centered below where people type their email instead, try this

open your file css and insert below:

.modal__content {
    top: auto !important;
    bottom: auto !important;
}

Here is result: