Password page appearance is different from Shopify preview and online view

[JoanneW]

I'm setting up a holding page with email sign up for a new Shopify store. The development/design page shows what I want it to look like (text in a solid colour box, centre alignment, custom font for header) but when I view it 'live' it is about 80% accurate. The colours, background image and text content are correct but the alignment and appearance of the text box are completely different. The custom font works on desktop but not mobile. 

I'm using Dawn theme. Shop is live on a paid plan. First image is how it should look according to my editor settings and preview. Second image is how it looks when I visit the site from chrome. 

Any advice very welcome please.

[suyash1]

@JoanneW - can you please share your password page link?

[JoanneW]

yes it's www.crystalcrutches.com

[suyash1]

@JoanneW   code shows that this banner has right aligned text, please check customize settings for this section and check if you can set it to center, else it will need custom coding

[JoanneW]

thanks, i don't know why though because in the editor is isn't showing that at all.

[suyash1]

@JoanneW - yes this is strange, since default settings are not working, you will need to add custom css, add below to the very end of your base.css file and check

.newsletter__subheading h4, .newsletter__subheading h3{color:#fff !important;}

@media screen and (min-width: 750px) {
 .password .banner__content {justify-content: center !important;}
}

[JoanneW]

Thank you, i tried that but no change

[namphan]

Hi @JoanneW,

Please go to Actions > Edit code > Assets > section-password.css file and paste this at the bottom of the file:

.banner__content {
        align-items: center !important;
}
.banner__content .banner__box {
    text-align: center;
    --color-foreground: #fff;
    background: #000;
    max-width: 90rem;
}
@media only screen and (min-width: 750px) {
    .banner__content .banner__box {
       padding: 60px;
    }
}