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 · Accepted solution]

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 </body> on theme.liquid
<style>
.input-group .input-group-field {
min-width: 100% !important;
}
.text-center .newsletter-section__content form {
padding-right: 17% !important;
}
</style>

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-ロイ]

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