Email signup module restricting to page width and how can customise it into this design?

Store Design
, , ,
1

Hi, I’m trying to customise my email signup form. I want it to look like the image below:

victorying_2-1676983672796.png
victorying_2-1676983672796.png1432×486 54.2 KB

but there is no max-width in the section so it ends up looking like this:

victorying_3-1676983723046.png
victorying_3-1676983723046.png3420×1336 588 KB

The line divider is there already but it is the same colour as the background. My question is how do I add a max-width to the section and how can I style my form to look like my design?

The website link is

https://www.fredsprovidore.com.au/

and the password is wataff

Thanks in advance!

2

Hi @victorying ,

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

.newsletter-form {
    max-width: 600px;
}
.newsletter__wrapper .newsletter-form__field-wrapper {
    max-width: 600px;
    width: 100%;
    border-bottom: 1px solid #000;
}

.newsletter-form__field-wrapper .field__input {
    box-shadow: none !important;
    padding-left: 0 !important;
}
.newsletter-form__field-wrapper .field__input:focus + .field__label {
    display: none;
} 
.newsletter-form__field-wrapper .field:before,
.newsletter-form__field-wrapper .field:after {
    display: none;
}
.newsletter-form__field-wrapper .field__label {
    left: 0;
}

I hope it would help you
Best regards,

Richard | PageFly

1 Like