Password Page - Mobile Layout View

[LittleWins]

Hi, Could someone help me change the email signup banner to appear in the centre of the background as it does on Desktop view. On mobile view it appears as the following; header, background, email banner, footer. Whereas on Desktop view, they are more layered which looks much better. 

Thanks, 

Olivia 

[suyash1]

@LittleWins Can you please share this page link?

[LittleWins]

Hi, yes it’s little-wins.co.uk

[suyash1 · Accepted solution]

@LittleWins 

please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

@media screen and (max-width: 749px) {
.password .banner__content{top: 50%; bottom: 50%; position: absolute;}
}

[LittleWins]

Great, Thank you so much for your help. One other question is, do you know how to change the colour of the box where someone would enter their email address? Just so it isn't the same colour as the whole banner? Or even to just give the email box an outline? Thanks

[suyash1]

@B2Bridge -- add this css and check

.password .newsletter-form__field-wrapper .field__input{border: 1px solid #878787;}

[LittleWins]

Amazing, thanks so much! 😁 That's worked, any chance I can change the colour of the border from black to the blue of the text? 

[suyash1]

@LittleWins - please change color shade in the border code above -  #878787 to #264872

[LittleWins]

Amazing, thank you so much 

[B2Bridge]

Hi @LittleWins, please try this:

Step 1: Open Online Store -> Themes -> Edit code

Step 2: Find theme.liquid file

Step 3: Paste this code before the close </head> tag:

<style>
@media screen and (max-width: 749px) {
    .password-main .banner__media {
        height: 37rem !important;
        position: absolute !important;
    }
    .password-main .banner-content {
       height: 37rem !important;
    }
}
</style>

If this helpful, please give us a like and mark its as a solution. Thanks you 😍