Jump to content

Custom CSS for Newsletter block

Recommended Posts

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;
}

Screenshot 2021-08-23 at 12.15.18.png

Edited by weareb
Link to comment
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

 

364026628_ScreenShot2021-09-02at.thumb.png.774f1058f11203a2dd9c01450e91f7b3.png

 

 

 

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??

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.