Edit email banner for password page

[hiu]

I just adjusted the email banner on for the desctop version. Now it does not fit to the mobile version. I want it to look like in the desctop version but I dont know how to change it so that it will fit either on mobile or desctop. I would appreciate some help. My website: hiu.world

Web version

mobile version - does not fit at all - somehow the email text backround is white and not transparent

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
#NewsletterForm--template--24729009750364__main,
.content-container--full-width-mobile{
  background: transparent !important;
}
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[hiu]

Thank you. I have another problem. I cant find a way to change the outline of the input box for the newsletter. It should only apply to the password page. I want it to have a white outline without changing the color for my whole website.

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
input#NewsletterForm--template--24729009750364__main {
  box-shadow: 0 0 0 .1rem rgba(255, 255, 255, 1) !important;
}
#Banner-template--24729009750364__main .field:after {
  box-shadow: unset !important;
}
</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[hiu]

Did not work unfortunatly. I also tried to add this in a custom css but the outline just became thinner but was still black.

[AnneLuo]

Can you please send me your collaborator code? I will check it for you.

[hiu]

5545

[AnneLuo]

Applied the access. Please accept.

[hiu]

Accepted 

[AnneLuo]

Hi, @hiu 

I find that the layout of the page has changed. Do you still need to modify it?

[B2Bridge]

Hi @hiu 
This is what I see when I visit your store.

You can fix them, 

please follow our instructions:

1/ Shopify admin > Online store > Edit code
2/ Search for "theme.liquid" file
3/ Open the file and search for </head> tag and add the following code above </head> tag

{% style %}
div.email-signup-banner__box banner__box newsletter.email-signup-banner__box--no-image{
    background-color: transparent !important;
}
{% endstyle %}

This is result
 

 If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you 😍