avanti Posted November 12, 2022 Share Posted November 12, 2022 (edited) 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! Edited November 12, 2022 by avanti Submitted too soon Link to comment
Ziggy Posted November 12, 2022 Share Posted November 12, 2022 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 tuanphan 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment