Shopify themes, liquid, logos, and UX
Hey guys, how can I change the size of containers in the email sign-up section?
I want to increase them to 260x52 px.
Here’s the link to my store: https://1049xn-ya.myshopify.com/
(Just scroll all the way down; the email sign-up section is there.)
Thanks a lot,
Tim
Solved! Go to the solution
This is an accepted solution.
Hi @CreatorTim ,
You can follow the steps here:
Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there
Here is the code for step 3:
@media screen and (min-width: 1024px){
.newsletter.center form#contact_form .newsletter-form__field-wrapper {
max-width: unset !important;
width: 540px !important;
}
.newsletter.center form#contact_form .newsletter-form__field-wrapper > .field {
width: 260px !important;
height: 52px !important;
}
}
Here is the result:
Please let me know if it works!
Best,
Daisy
This is an accepted solution.
Hi @CreatorTim ,
You can follow the steps here:
Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there
Here is the code for step 3:
@media screen and (min-width: 1024px){
.newsletter.center form#contact_form .newsletter-form__field-wrapper {
max-width: unset !important;
width: 540px !important;
}
.newsletter.center form#contact_form .newsletter-form__field-wrapper > .field {
width: 260px !important;
height: 52px !important;
}
}
Here is the result:
Please let me know if it works!
Best,
Daisy
Hey, thanks so much, it works, but it’s not centered. How can I fix that?
You can check it out here: https://1049xn-ya.myshopify.com/
(Just scroll all the way down, it’s there.)
Thanks a lot,
Tim
Hello @CreatorTim
Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.
.newsletter__subheading.rte {
max-width: 100%;
}
Hey, thanks a lot, but how do I make the containers perfectly centered? They’re slightly shifted to the right.
You can check it out here: https://1049xn-ya.myshopify.com/
(Just scroll all the way down, it’s there.)
Thanks brothe!
Tim
Hello @CreatorTim
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
#contact_form > .newsletter-form__field-wrapper {
max-width: 645px;
height: 52px !important;
}
resuklt
If this was helpful, hit the like button and accept the solution.
Thanks
Hey, thanks a lot, but how do I make the containers perfectly centered? They’re slightly shifted to the right.
You can check it out here: https://1049xn-ya.myshopify.com/
(Just scroll all the way down, it’s there.)
Thanks so much,
Tim
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
@media screen and (min-width: 1024px) {
.newsletter.center form#contact_form .newsletter-form__field-wrapper {
margin-left: -20px !important;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Yes, thank you so much brother!
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025