How to hide container on mobile for an email form

[pael]

Hi, I'm currently designing the password page for my website and it looks good on desktop however on mobile the email form has no box around it due to there not being an option to hide container for the mobile like there is on desktop.

the right is how it looks on desktop and how i want it to look however the left is what the mobile looks like.

the website is: pael.fyi

[Moeed]

Hey @pael 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.email-signup-banner__box.banner__box.newsletter.newsletter__wrapper.isolate.email-signup-banner__box--no-image.content-container.color-scheme-1.gradient.content-container--full-width-mobile {
    display: none !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[pael]

Hi, thanks for the reply. unfortunately this is not what i was looking for; i still want the email form to be there but it needs to look like the desktop version where there is an outline of the email form box as on the mobile version it just shows the text.

[Moeed]

Hey @pael 

Apologies for the confusion, remove the previous code and add this new code with the same steps mentioned above.

<style>
.newsletter-form__field-wrapper .field__input {
    border: solid 1px black !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[pael]

Hi, still not working unfortunately, can you have a look if i've entered the code right?