Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom CSS for Newsletter block


weareb

Question

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

5 answers to this question

Recommended Posts

  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...