Hi all! The stacked fields for my newsletter block are not centered. Does anyone know how I can fix this?
Your help would be much appreciated!!
Here's the custom CSS I'm currently using to customize the appearance:
// Email newsletter section
.newsletter-block {
header {
.newsletter-form-header-title {
// Styling the form title
font-family: "DeliciousBold", sans-serif; //Main font family
font-size: 2rem !important;
color: #59570F !important;
letter-spacing: -1.1px !important;
}
.newsletter-form-header-description {
p {
// Styling the newsletter main text
font-family: "DeliciousBold", sans-serif;
font-size: 1.4rem !important; // Size can be in px
font-weight: 400;
line-height: 1.2em;
color: #59570F !important;
}
}
}
.newsletter-form-body {
input.newsletter-form-field-element {
// Styling the form input fields
// including the "email" field
min-width: 200px;
font-family: "DeliciousBold", sans-serif;
color: #59570F !important;
padding: .8rem !important;
font-size: 1.3rem !important;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0px;
border-radius: 10px;
text-align: center;
}
}
// This hides the container for the form disclaimer
// this part needs to be removed if you display
// the disclaimer on your website
.newsletter-form-footnote {
display: none;
}
.newsletter-form-header-description {
display: none;
}
// Styling the newsletter block button
.newsletter-form-button-wrapper {
.newsletter-form-button {
// Styling the button text and appearance
min-width: 200px;
font-family: "DeliciousBold", sans-serif !important;
text-align: center;
padding: 1.5rem 4rem !important; // This controls how big the button is
color: #FFF4E1 !important; // Button text color
background-color: #59570F !important; // Button background
text-transform: uppercase !important;
border-radius: 10px;
.newsletter-form-button-label {
font-size: 1.7rem !important;
font-weight: 600;
letter-spacing: 0px;
}
}
}
}
