How do I shorten the width of my newsletter bar in the footer?

Solved
maleka
Excursionist
28 0 9

Hello, 

Please can someone advise how I shorten the width of my newsletter bar in my footer? I would like it to be around half the length. I am using the debut theme. 

On the image below I have marked in red the approximate size I would like it to be:

maleka_0-1626293067856.png

Thanks in advance!

Accepted Solution (1)

Accepted Solutions
Nick_Marketing
Shopify Partner
1360 314 397

This is an accepted solution.

Hi @maleka 

Go to theme.css

Add the following code on line 7004, which is just above the line that says:

/*================ ADDED VERTICAL FOOTER ================*/

 

 

.site-footer__item-inner--newsletter {
  width: 70%;
}

 

 

Hope it works!

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).

View solution in original post

Replies 11 (11)
Nick_Marketing
Shopify Partner
1360 314 397

Site link please

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
BejewelsUK
Tourist
7 0 4

I would also like to shorten my newsletter bar, I am using Testament theme, url: www.bejewels.co.uk.

Would be really grateful if you are able to help, as I have just been through 100 pages of the forum trying to find an answer....

Nick_Marketing
Shopify Partner
1360 314 397

Hi @BejewelsUK 

  1. Go to stylesheet.css
  2. Scroll all the way to the bottom and add the following code:

 

 

input#footer-EMAIL {
  width: 40%;
}

 

 

  You can change the percentage number to your desire. Original was 60%

 

Hope I've helped! If you have specific questions, feel free to PM me.

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
BejewelsUK
Tourist
7 0 4

Perfect! Thank you 🙂

 

maleka
Excursionist
28 0 9
Nick_Marketing
Shopify Partner
1360 314 397

@maleka please provide a pass, the homepage is pass protected. You can PM me if you like.

2021-07-14 20_27_32-MALEKA INTERIORS – Opening Soon — Firefox Developer Edition.png

 

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
maleka
Excursionist
28 0 9

Hey @Nick_Marketing 

Sorry, it's Development3687

Thanks!

Nick_Marketing
Shopify Partner
1360 314 397

This is an accepted solution.

Hi @maleka 

Go to theme.css

Add the following code on line 7004, which is just above the line that says:

/*================ ADDED VERTICAL FOOTER ================*/

 

 

.site-footer__item-inner--newsletter {
  width: 70%;
}

 

 

Hope it works!

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
maleka
Excursionist
28 0 9

Amazing thank you @Nick_Marketing !

One last question, is there a way to push it over to the right-hand side? 

Thank you!

Nick_Marketing
Shopify Partner
1360 314 397

@maleka  The footer needs substantial adjustment by a developer, there's quite a bit of overlap (On the left side, in particular).


Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
nathaelparis
New Member
1 0 0

Hi, i can't find the 

/*================ ADDED VERTICAL FOOTER ================*/

and i've got only 4837 , i' using the theme brooklyn . 

But thanks for the code , just need to find where to insert it .