Jump to content

Issues with Padding and Margin in Newsletter Form Block

Recommended Posts

Hi there,

My website: www.eyzhn.co

In my footer section (on all pages):

(1) I would like to make the footer newsletter form button the same height as the form field elements. When "inspecting" my page I am able to do that by adjusting the padding from 1.2rem to 1rem. However when I add this code to CSS nothing happens.

.newsletter-form-button {
    width: 100% !important;
    padding: 1rem !important;
    margin: 0px !important;
}

 

(2) I would like to fix the margin above and below the "subscribe" and descriptive text so that it aligns with the lists next to it on the left. Here is my custom footer code for reference.

 

/* Hover and active link colour */
footer a {text-decoration: none !important;}
section[data-section-id="63384be20590b6496ef20a8a"] a:hover * {color: #6c988d !important;}#block-yui_3_17_2_1_1668132221218_478394 * {padding: 10;}

/* Center lists on mobile */
@media screen and (max-width: 640px) {footer p { text-align: center;}}

/* Center newsletter title on mobile */
@media screen and (max-width: 640px) {#block-yui_3_17_2_1_1668132221218_478394 * {text-align: center;}}

/* Newsletter form input fields */ 
.newsletter-form-body {input.newsletter-form-field-element {padding: .8rem !important;  border-radius: 200px; text-align: center;}}

/* Newsletter field & button width */
.newsletter-form-fields-wrapper.form-fields {width: 100% !important; display: block !important;}
.newsletter-form-fields-wrapper.form-fields>* {max-width: 100% !important;}
.newsletter-form-field-wrapper {width: 100% !important; max-width: 100% !important;}
.newsletter-form-button {width: 100% !important; padding: 1rem !important; margin: 0px !important;}

/* Newsletter margins */

.newsletter-form-body>div {margin-top: 0 !important;}

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

 

Thanks!

Screenshot 2022-11-12 at 11.20.25 AM.png

Edited by avanti
Submitted too soon
Link to comment

Try this for the button padding:

.newsletter-block .newsletter-form-button {
  padding:1em 2.25em;
}

Adjust this to try and align the newsletter top text (though replacing that with a text block and removing the title and description in CSS would be easier to keep it correct)

.newsletter-block .newsletter-form-header-title {
  margin-bottom:0rem;
}

Hope that helps

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.