Jump to content

How to reduce height of Newsletter Block

Go to solution Solved by Lesum,

Recommended Posts

Hello

Can you help me reduce the height of Newsletter Block? It spans over six rows and I want to get rid of the empty space, I want it to span over two rows.
Thank you

 

newsletter1.jpg

Link to comment
  • Replies 5
  • Views 282
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted (edited)


I would like to be able to adjust the Row Count number. Right now 6 is considered to be minimum, which is not good because it creates too much empty space. It's like the section doesn't recognise that the Newsletter block got reduced through my editing process. rows.thumb.jpg.cec294e9beabc12e0e2ed44f5f13347c.jpg

Edited by Aless
Link to comment
  • Solution

@Aless Hi! You can try adding the code under Website > Pages > Website Tools > Custom CSS to reduce the spacing. With the current code, the newsletter block spans over three rows, which is the best we can do. However, if the newsletter input field and button height are reduced, we can try some additional code to make it span over two rows

.newsletter-block .newsletter-form-header {
    display: none !important;
}

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

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

.newsletter-block .newsletter-form-fields-wrapper {
    margin-top: 0 !important;
}

.newsletter-block .newsletter-form-button-wrapper {
    margin-top: 0 !important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

I think I managed to find the code to make the Newsletter button smaller:

 

Quote

// change the size of the button //

button.newsletter-form-button.sqs-system-button {

padding-top: 10px !important; padding-bottom: 10px !important; 

}
// change the size of the form fields //

.sqs-block-newsletter .newsletter-form-field-element { 

padding-top: 10px !important; padding-bottom: 10px !important; 

 

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

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.