How To Increase Size Horizontally??

[rgeafrauuhf]

i want to icrease width of enter your email horizontally as mentioned in image by black box.. and want the subscribe button size 1/3rd

URL : https://baab16-dc.myshopify.com/

PASS : Drapex

[niraj_patel]

Hello @rgeafrauuhf

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.input-group .input-group-field { min-width: 100% !important; } .text-center .newsletter-section__content form { padding-right: 17% !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[BSS-TekLabs]

• Here is the solution for you @rgeafrauuhf

• Please follow these steps:

• Then find the base.css or theme.css file.

• Then add the following code at the end of the file and press ‘Save’ to save it.

.input-group-field.newsletter__input {
 width: 300px !important;
}

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[Roy_12]

Hi @rgeafrauuhf ,

We can do this through CSS.

To get started, follow these steps:

1. Log in to your Shopify Admin panel.
2. Go to Online Store > Themes > Customize.
3. In the Customizer, navigate to the Theme settings and add the below code in the Custom CSS field.

.input-group.newsletter__input-group {
    max-width: unset;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.newsletter-section .input-group.newsletter__input-group .btn {
    width: 100%;
}​

Try changing the width .input-group.newsletter__input-group from 100% to any value to suit it to your liking.

Result:

[BSSCommerce-B2B]

Hi @rgeafrauuhf ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

.input-group.newsletter__input-group {
    width: 100% !important;
}
.input-group.newsletter__input-group span.input-group-btn button {
    width: 100px !important;
}
.input-group.newsletter__input-group span.form__submit--large {
    display: flex !important;
    justify-content: center !important;
}

Step 3: Save your code and reload this page.

=>> The result:

We hope my suggestions will solved your issue.

If it is helpful, can you kindly give us likes and mark the solution for us?

Have a nice day, sir