7.1 Newsletter Block CSS Help - how to reduce size of email fill form and submit button

I would like your help please with code to adjust/decrease the size of the email fill form box and submit button (visual attached of desktop and mobile/tablet) located in my footer on version 7.1. The email fill form box and submit button are too large and do not shrink when I try to change button size in Squarespace's built in button size adjustment tool.

Thanks so much! 

Can you share link to your site?

1 hour ago, tuanphan said:

Can you share link to your site?

https://sandralynnallendesign.squarespace.com/

thanks so much!

23 hours ago, CarolynSmith said:

https://sandralynnallendesign.squarespace.com/

 

thanks so much!

Add to Home > Design > Custom CSS

.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
button.newsletter-form-button.sqs-system-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

12 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
button.newsletter-form-button.sqs-system-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

 

Thank you so much! 

That's perfect, thank you!

How do you change the padding around the newsletter form so it's narrower? And can you make that 'cell' have a white background?

Thanks,

Patrick 

https://saintly-temp.squarespace.com/without-text

Hi Tuan,

How do you change the font size of the button in a newsletter block? I have tried your method, and no luck so far.

Quote

button.newsletter-form-button.sqs-system-button {font-size:10px !important}

Nothing is happening to it.

19 hours ago, HarKS said:

Hi Tuan,

 

How do you change the font size of the button in a newsletter block? I have tried your method, and no luck so far.

 

Nothing is happening to it.

Can you share link to page where you use newsletter? We can check easier.

Since I deleted the 'disclaimer' text in the newsletter form on the footer, there is a lot of extra padding at the bottom. do you know how to resolve?  @tuanphan

On 9/22/2021 at 12:41 AM, margmorg said:

Since I deleted the 'disclaimer' text in the newsletter form on the footer, there is a lot of extra padding at the bottom. do you know how to resolve?  @tuanphan

Hi,

What is site url?

https://glockenspiel-mandolin-ltjl.squarespace.com/config/

@tuanphan Actually it looks better now, maybe it just wasn't updating!

On 9/29/2021 at 10:09 PM, margmorg said:

@tuanphan Actually it looks better now, maybe it just wasn't updating!

 

 

Hi,

What is access password?

On 10/2/2021 at 2:59 AM, tuanphan said:

Hi,

What is access password?

peanut

On 10/14/2021 at 2:41 AM, margmorg said:

peanut

Try adding to Design > Custom CSS

footer.sections {
.newsletter-form-body {
    padding-bottom: 0 !important;
}

.newsletter-form-footnote {
    display: none;
}
}

On 10/15/2021 at 2:21 AM, tuanphan said:

Try adding to Design > Custom CSS

footer.sections {
.newsletter-form-body {
    padding-bottom: 0 !important;
}

.newsletter-form-footnote {
    display: none;
}
}

 

This worked for me, thank you so much! 

Hi @tuanphan! I'm trying to get the look of this newsletter block attached below in my footer. Can you help, please? Thank you!!

site url: www.louieandthird.com

pw: LTC

On 11/3/2021 at 11:40 PM, sheriipop said:

Hi @tuanphan! I'm trying to get the look of this newsletter block attached below in my footer. Can you help, please? Thank you!!

site url: www.louieandthird.com

pw: LTC

Hi,

Same for desktop  + mobile, or desktop only?

9 hours ago, tuanphan said:

Hi,

Same for desktop  + mobile, or desktop only?

Hi @tuanphan! I've used your CSS on other sites without an issue but for some reason, it's not working on this site: 

https://saffron-lychee-ydn6.squarespace.com/

PW: retro

Would love any advice - thanks! 

On 4/18/2022 at 10:43 AM, wonderpiece said:

Hi @tuanphan! I've used your CSS on other sites without an issue but for some reason, it's not working on this site: 

https://saffron-lychee-ydn6.squarespace.com/

PW: retro

Would love any advice - thanks! 

You mean form in footer? Reduce space between subscribe text - input/button?

This scale for the newsletter form works great - i like the input field being no taller than the button: 

https://www.christycoleman.studio/

But the footer form in the site I am building now seems way too big but i'm using the same code as has been suggested here AND in the Christy Coleman site so i'm a little puzzled. The box around "Email Address" is bigger than the Sign Up button and I can't seem to reduce the size of it (which is my goal).

https://saffron-lychee-ydn6.squarespace.com/

On 4/21/2022 at 10:37 AM, wonderpiece said:

This scale for the newsletter form works great - i like the input field being no taller than the button: 

https://www.christycoleman.studio/

 

But the footer form in the site I am building now seems way too big but i'm using the same code as has been suggested here AND in the Christy Coleman site so i'm a little puzzled. The box around "Email Address" is bigger than the Sign Up button and I can't seem to reduce the size of it (which is my goal).

https://saffron-lychee-ydn6.squarespace.com/

Use this CSS

footer.sections input.newsletter-form-field-element.field-element {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: 14px !important;
}

You are the best @tuanphan. Thank you as always !!

On 4/20/2020 at 3:57 PM, tuanphan said:

Add to Home > Design > Custom CSS

.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
button.newsletter-form-button.sqs-system-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

 

This worked pretty precisely, thank you!