Full width newsletter block button on mobile in Squarespace

Here’s a quick tutorial on making the Squarespace newsletter field and button span full-width on mobile screen sizes to mobile-optimise the block properly as this currently isn’t a native feature.

1. Add the Newsletter Block to your page

1. Open the Page Editor in Squarespace and navigate to the page where you want to add the newsletter block.

2. Click Add Block and select Newsletter from the options.

3. Position the newsletter block where you’d like it to appear, typically below the main content or above the footer for higher visibility.

4. Customise the headline, description, and button text as needed. Keep the text short and direct to increase sign-ups on mobile.

2. Add Custom CSS

Squarespace doesn’t make blocks full-width by default, so we’ll add a small bit of custom code to make the newsletter block span the entire screen on mobile.

1. Go to Design > Custom CSS to open the CSS editor.

2. Add the following CSS to make the newsletter block full-width:

Code:

/* Full-width Newsletter Block for Mobile */

@media only screen and (max-width: 640px) { .newsletter-block .newsletter-form-button-wrapper, .newsletter-block .newsletter-form-button, .newsletter-block .newsletter-form-fields-wrapper, .newsletter-block .newsletter-form-field-wrapper, .newsletter-block .newsletter-form-wrapper--layoutStack .newsletter-form-field-wrapper, .newsletter-block .newsletter-form-wrapper--layoutStack .newsletter-form-name-fieldset, .newsletter-block .newsletter-form-name-fieldset {

width: 100% !important;

max-width: 100%;

display: block !important;

    } }

---