Password Page needs centering

Password Page needs centering

OCEANL
Tourist
8 0 0

Screenshot 2024-06-19 at 19.40.37.png

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.

Replies 7 (7)

StevenDunneDev
Shopify Partner
57 14 10

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

If my answer has been helpful to you, please give it a like and accepted solution. I greatly appreciate it 🙂

If you'd like to hire me to solve bigger problems for you, please reach out. I'd love to hear from you
OCEANL
Tourist
8 0 0

Hello Steven,

 

Not sure how to do that? Can you assist? 

StevenDunneDev
Shopify Partner
57 14 10

Sure, whats your store URL?

If my answer has been helpful to you, please give it a like and accepted solution. I greatly appreciate it 🙂

If you'd like to hire me to solve bigger problems for you, please reach out. I'd love to hear from you
OCEANL
Tourist
8 0 0

Hello @StevenDunneDev 

 

Thank you!

 

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

Password: peempe

StevenDunneDev
Shopify Partner
57 14 10

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

If my answer has been helpful to you, please give it a like and accepted solution. I greatly appreciate it 🙂

If you'd like to hire me to solve bigger problems for you, please reach out. I'd love to hear from you

BSSCommerce-B2B
Shopify Partner
564 112 136

Hi @OCEANL ,

open your file css and insert below:

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

here is result:

mobile

BSSCommerceB2B_0-1719396709587.png

 

desktop

BSSCommerceB2B_1-1719396709593.png

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSSCommerce-B2B
Shopify Partner
564 112 136

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:

BSSCommerceB2B_2-1719396942083.png

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency