How to fix newsletter button visibility on mobile password page?

Store Design
1

hey my problem on the password page is that you can see the newsletter button when you are in the desktop but when i switch to the smartphone view then the text and the button slides down and you can’t see it anymore.
It would be best if it is fixed with the background image and therefore always remains in the same place.

Bildschirm­foto 2023-02-07 um 15.37.31.png
Bildschirm­foto 2023-02-07 um 15.37.31.png1166×460 128 KB

Bildschirm­foto 2023-02-07 um 15.37.43.png
Bildschirm­foto 2023-02-07 um 15.37.43.png544×755 67.9 KB

I hope the pictures make it clear

thanks for your help

2

Hi @le_X_Atelier ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-email-signup-banner.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
    .newsletter__wrapper, 
    .email-signup-banner__box .email-signup-banner__heading, 
    .newsletter-form__field-wrapper .field__label,
    .newsletter-form__field-wrapper .field__input {
        color: #000 !important;
    }
    .newsletter-form__field-wrapper .field:after {
        border-color: #000 !important;
    }
}

I hope it would help you
Best regards,

Kate | PageFly

3

Yeah now i can see the text but i want it like the desktop view so that the text is not under the picture so the text has to be also on the picture in white color like my picture in the question

You know how i mean? :grinning_face:

4

Bildschirm­foto 2023-02-07 um 15.37.43.png
Bildschirm­foto 2023-02-07 um 15.37.43.png544×755 73.2 KB

so in this position

1 Like
5

Hi @le_X_Atelier ,

You can replace previous code by below code in section-email-signup-banner.css file:

@media screen and (max-width: 749px) {
    .password-main .banner__media {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
    }
    .password-main .banner__content {
        height: 34rem !important;
    }
}

I hope it would help you
Best regards,

1 Like
6

Thank you and do you have an idea how i can fill this gap so that between the picture and the line is no more any white space so maybe i can make the picture a little bit bigger or something else?

IMG_0218.PNG
IMG_0218.PNG1179×2556 230 KB

Thanks a lot for your help!

1 Like
7

Hi @le_X_Atelier ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-email-signup-banner.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
    .password-main .banner__media {
        height: calc(100vh - 340px) !important;
    }
    .password-main .banner__content {
    height: calc(100vh - 340px) !important;
}
}

I hope it would help you
Best regards,

Kate | PageFly

1 Like