Solved

how to adjust the header padding of password page

Akin1
Tourist
7 0 1

So i want to reduce the padding on the password page header, its so thick. Could you guys help? Also i want to make the header semi transparent?

 

the website is - ryusenshiclothing.myshopify.com

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
1794 507 373

This is an accepted solution.

Hey @Akin1,

 

 

Go to your theme's "Edit Code" Option, then in the search bar type "password.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

 

 

<style>
body .password-header {
    padding: 0 !important;
    height: 100% !important;
}

#shopify-section-main-password-header .color-scheme-1.gradient {
    background: rgba(0, 0, 0, 0.3) !important;
}

.email-signup-banner {
    height: 99vh !important;
}

div#shopify-section-main-password-header .gradient {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 2 !important;
}

.modal__toggle-open.password-link.link.underlined-link {
    justify-content: center !important;
    color: white !important;
    padding-bottom: 10px !important;
}

@media only screen and (max-width: 749px) {
    .banner__media.media {
        height: 99vh !important;
    }
    
    .banner__content.banner__content--middle-center.page-width {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }    

    .banner__content.banner__content--middle-center.page-width h2,
    .banner__content.banner__content--middle-center.page-width p {
         color: black !important;   
    }
}
</style>

 

 

 

Screenshot for reference

ThePrimeWeb_0-1708529665676.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

ThePrimeWeb
Shopify Partner
1794 507 373

This is an accepted solution.

Hey @Akin1,

 

For desktop, yes. But not mobile, it will be ugly on mobile.

 

Just replace the earlier code with this one.

 

<style>
body .password-header {
    padding: 0 !important;
    height: 100% !important;
}

#shopify-section-main-password-header .color-scheme-1.gradient {
    background: rgba(0, 0, 0, 0.3) !important;
}

.email-signup-banner {
    height: 99vh !important;
}

div#shopify-section-main-password-header .gradient {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 2 !important;
}

.modal__toggle-open.password-link.link.underlined-link {
    justify-content: center !important;
    color: white !important;
    padding-bottom: 10px !important;
}

@media only screen and (max-width: 749px) {
    .banner__media.media {
        height: 99vh !important;
    }
    
    .banner__content.banner__content--middle-center.page-width {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }    

    .banner__content.banner__content--middle-center.page-width h2,
    .banner__content.banner__content--middle-center.page-width p {
         color: black !important;   
    }
}

@media only screen and (min-width: 750px) {
    body .password-header {
        display: grid !important;
        place-items: center !important;
    }
    img.password-logo {
        grid-column: 2 !important;
    }    
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 3 (3)

ThePrimeWeb
Shopify Partner
1794 507 373

This is an accepted solution.

Hey @Akin1,

 

 

Go to your theme's "Edit Code" Option, then in the search bar type "password.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

 

 

<style>
body .password-header {
    padding: 0 !important;
    height: 100% !important;
}

#shopify-section-main-password-header .color-scheme-1.gradient {
    background: rgba(0, 0, 0, 0.3) !important;
}

.email-signup-banner {
    height: 99vh !important;
}

div#shopify-section-main-password-header .gradient {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 2 !important;
}

.modal__toggle-open.password-link.link.underlined-link {
    justify-content: center !important;
    color: white !important;
    padding-bottom: 10px !important;
}

@media only screen and (max-width: 749px) {
    .banner__media.media {
        height: 99vh !important;
    }
    
    .banner__content.banner__content--middle-center.page-width {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }    

    .banner__content.banner__content--middle-center.page-width h2,
    .banner__content.banner__content--middle-center.page-width p {
         color: black !important;   
    }
}
</style>

 

 

 

Screenshot for reference

ThePrimeWeb_0-1708529665676.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Akin1
Tourist
7 0 1

hi it looks great thank you so much.

i have one more question is it possible to take the password entry menu to the right side of the  header so , the header can be more tight?

ThePrimeWeb
Shopify Partner
1794 507 373

This is an accepted solution.

Hey @Akin1,

 

For desktop, yes. But not mobile, it will be ugly on mobile.

 

Just replace the earlier code with this one.

 

<style>
body .password-header {
    padding: 0 !important;
    height: 100% !important;
}

#shopify-section-main-password-header .color-scheme-1.gradient {
    background: rgba(0, 0, 0, 0.3) !important;
}

.email-signup-banner {
    height: 99vh !important;
}

div#shopify-section-main-password-header .gradient {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 2 !important;
}

.modal__toggle-open.password-link.link.underlined-link {
    justify-content: center !important;
    color: white !important;
    padding-bottom: 10px !important;
}

@media only screen and (max-width: 749px) {
    .banner__media.media {
        height: 99vh !important;
    }
    
    .banner__content.banner__content--middle-center.page-width {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }    

    .banner__content.banner__content--middle-center.page-width h2,
    .banner__content.banner__content--middle-center.page-width p {
         color: black !important;   
    }
}

@media only screen and (min-width: 750px) {
    body .password-header {
        display: grid !important;
        place-items: center !important;
    }
    img.password-logo {
        grid-column: 2 !important;
    }    
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website