How to change the size of containers?

Solved

How to change the size of containers?

CreatorTim
Navigator
471 1 71

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

CreatorTim_0-1736889438939.png

 

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

Accepted Solution (1)

DaisyVo
Shopify Partner
4469 501 598

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:

DaisyVo_0-1736899144875.png

 

Please let me know if it works!

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 8 (8)

DaisyVo
Shopify Partner
4469 501 598

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:

DaisyVo_0-1736899144875.png

 

Please let me know if it works!

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
CreatorTim
Navigator
471 1 71

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

devcoders
Shopify Partner
1620 190 496

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

 

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
CreatorTim
Navigator
471 1 71

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

GTLOfficial
Shopify Partner
880 182 192

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

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
CreatorTim
Navigator
471 1 71

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

GTLOfficial
Shopify Partner
880 182 192

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

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
CreatorTim
Navigator
471 1 71

Yes, thank you so much brother!