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 tag

.password-header { display: flex; flex-direction: column; }

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: