Customize Email Sign Up Bar Length (Dawn 9.0.0)

Store Design
, ,
1

Hello,

I am wanting to customize the length of my email sign up bar on DESKTOP ONLY. As well as, make it have slightly rounded edges (on both desktop and mobile). I have attached images to show what I would like it to look like.

Same length as the text below it.

MY WEBSITE: Wholesome Boy

Before:

aae53e9e58cc28d749debc63d422612a.png
aae53e9e58cc28d749debc63d422612a.png1899×592 34.4 KB

After:

aae53e9e58cc28d749debc63d422612a.jpg
aae53e9e58cc28d749debc63d422612a.jpg1899×592 33.7 KB

Thanks,

Justin

2

Hello @WholesomeBoy

Please follow below steps

Step 1: Go to Online Store → Theme → Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save

.newsletter__wrapper .newsletter-form{
	max-width: 520px;
}
.newsletter__wrapper .newsletter-form .newsletter-form__field-wrapper{
	max-width: 520px;
}
.newsletter__wrapper .newsletter-form .newsletter-form__field-wrapper .field:after{
	border-radius: 8px !important;
}

Note: right now it’s worked, but when you changed below text then, please change “520px” according to below text width

3

Hi @WholesomeBoy

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
@media screen and (min-width: 750px) {

.newsletter-form {max-width: 70rem !important;}

.newsletter__wrapper .newsletter-form__field-wrapper {max-width: 70rem !important;}

}

Regards,

San

4

Thank you!