How can I center my logo on the Dawn password page?

Hello! I’m almost ready to start sending my website out to friends to start signing up, but my password page at the top is sub par on desktop. I want to get my logo big front and centre at the top (it’s currently stuck to the left). Other than that it’s basically ready but I couldn’t find any code discussions that helped. Thank you in advance! URL is stillandallapparel.com

1 Like

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.liquid and paste this at the bottom of the file:
.password img.password-logo {justify-self: center; width: 100%; flex: 0 0 100%; max-width:400px !important}
.password .password-header {
display: flex;
}
2 Likes

I appreciate your response! Thank you.

I don’t actually see that under assets. The closest one I see is
theme-editor.js or under layout I see theme.liquid

Nothing with scss in it though. Is it different because it’s the password
page and not my main site?

@kmm1 - please add given code by @ZestardTech to the section-password.css file

2 Likes

Woo it worked!!! Thank you so so much.

One more question of something I just notiched - I switched the heading banner to “inverse” so it was black with white words, but I’m realizing it’s not completely black so you can see the black outline around my logo.

I looked at theme settings, but I can’t just change the heading banner without the rest of my text bubbles going wonky.

Do you know how to make the top banner pitch black so my logo blends?

Thanks again

@kmm1 - if you want like the screenshot below, then please add this css and check

.password .password-header {
    background-color: #000;
}

1 Like

Thanks again! Worked like a charm.

1 Like

Hi @ZestardTech and @suyash1 ,

I have the same issue but with the Express theme. On the desktop version the logo is centred. However, on the mobile version it’s floating towards the right of the screen (see screenshot attached).

My website is www.bearberrykitchen.com.

Many thanks,

Jo

@JoMedhurst - please add this css to the very end of your theme.min.css file and check, should look like screenshot below

.password__logo img{max-width: 100% !important;}

1 Like

Thank you so much. That worked a treat.