Custom CSS for Newsletter block

Site URL: https://www.littlebigguys.co.uk

I'm having some trouble adjusting the CSS of the newsletter form.

Originally, I wanted to decrease the height of the input fields and button from the default (which is massive) to be more like the rest of the buttons elsewhere.

I've used the snippet below for my changes, but it annoyingly causes the button text to sit at the bottom of the button. I have applied 'display: flex; align-items: centre;' to every parent block conceivable, without joy. Adding padding to the button or its wrapper only moves the outline and not the contents.

it would also be nice to change the field font-size to .9em, but I can't seem to find the correct class.

Any help would be appreciated, thanks.

.newsletter-block input {
 height: 0.3em;
 max-width: 18em;
 font-size: 0.9em; 
}
.newsletter-block. newsletter-form-wrapper {
  display: flex;
  align-items: centre;
}

.newsletter-block .newsletter-form-button {
  max-height: 0.3em;
}

Add to Design > Custom CSS

footer.sections button.newsletter-form-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

Thank you so much! works perfectly

I found this amazing Squarespace website today.

I was wondering how to create a custom form embedded to an image block (see images below) to collect  first name and email.

It seem to be a normal form and not a newsletter with optin.

See photo and website attached.

https://www.rebeccagracedesigns.com/freebies

On 9/2/2021 at 10:53 AM, Jeremyn said:

I found this amazing Squarespace website today.

I was wondering how to create a custom form embedded to an image block (see images below) to collect  first name and email.

It seem to be a normal form and not a newsletter with optin.

 

See photo and website attached.

 

https://www.rebeccagracedesigns.com/freebies

 

 

 

 

Hi,

You mean newsletter section with layout

Left: Image

Right: Text + newsletter form.

I guess you can achieve this by using Image Blocks, Text Block, Newsletter??

This will actually do the job. Thanks Tuan 🙂