How to change the size of containers?

Store Design
, , , , , , , , ,
1

Hey guys, how can I change the size of containers in the email sign-up section?

CreatorTim_0-1736889438939.png
CreatorTim_0-1736889438939.png1909×846 91.3 KB

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

2

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:

DaisyVo_0-1736899144875.png
DaisyVo_0-1736899144875.png1347×689 74.5 KB

Please let me know if it works!

Best,

Daisy

3

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%;
}

devcoders_0-1736916309185.png
devcoders_0-1736916309185.png1347×497 29.3 KB

4

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

144.png
144.png1416×437 16.7 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

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

6

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

7

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

8

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

146.png
146.png1898×552 34.3 KB

If this was helpful, hit the like button and accept the solution.
Thanks

9

Yes, thank you so much brother!