Jump to content

Newsletter block formatting to suit mobile

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://jellyfish-kumquat-hdzl.squarespace.com/

Hey everyone, I'm still fairly new to customising Squarespace using CSS and have spent a while attempting to format the newsletter block to look similar to the example pictured. Specifically the "Email Address" field and "Submit" button—I want these on one line without a gap between as seen in the attached screenshot.

I managed to get things looking fairly close but couldn't get everything to work for mobile/smaller screens specifically, every time I preview on mobile the newsletter block reverts back to displaying the field stacked above the button, ideally it would all remain as one single line and scale to fit the screen.

Any help would be greatly appreciated!

URL: https://jellyfish-kumquat-hdzl.squarespace.com/
Password: TEMP_B1803

Screen Shot 2020-03-18 at 20.44.57.png

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Try adding to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.newsletter-block .newsletter-form-body {
    display: flex;
}
.newsletter-form-fields-wrapper.form-fields {
    width: 70%;
}
.newsletter-form-button-wrapper.submit-wrapper {
    width: 30%;
}
.newsletter-form-button-wrapper.submit-wrapper button {
    width: 100%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
1 hour ago, tuanphan said:

Try adding to Home > Design > Custom CSS


@media screen and (max-width:767px) {
.newsletter-block .newsletter-form-body {
    display: flex;
}
.newsletter-form-fields-wrapper.form-fields {
    width: 70%;
}
.newsletter-form-button-wrapper.submit-wrapper {
    width: 30%;
}
.newsletter-form-button-wrapper.submit-wrapper button {
    width: 100%;
}
}

 

Incredible work, thank you so much for your help!

Link to comment
  • 10 months later...
On 3/18/2020 at 8:25 AM, tuanphan said:

Try adding to Home > Design > Custom CSS


@media screen and (max-width:767px) {
.newsletter-block .newsletter-form-body {
    display: flex;
}
.newsletter-form-fields-wrapper.form-fields {
    width: 70%;
}
.newsletter-form-button-wrapper.submit-wrapper {
    width: 30%;
}
.newsletter-form-button-wrapper.submit-wrapper button {
    width: 100%;
}
}

 

Thanks for the information this worked great! However, how do i get the reCAPTCHA box below the newsletter box and subscribe box? 

thank you

Link to comment
On 3/18/2020 at 8:25 AM, tuanphan said:

Try adding to Home > Design > Custom CSS


@media screen and (max-width:767px) {
.newsletter-block .newsletter-form-body {
    display: flex;
}
.newsletter-form-fields-wrapper.form-fields {
    width: 70%;
}
.newsletter-form-button-wrapper.submit-wrapper {
    width: 30%;
}
.newsletter-form-button-wrapper.submit-wrapper button {
    width: 100%;
}
}

 

@tuanphan How do i use this code but get my reCAPTCHA button on a separate line? 

Link to comment
On 1/28/2021 at 4:26 AM, mriddell91 said:

@tuanphan How do i use this code but get my reCAPTCHA button on a separate line? 

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...
On 10/1/2021 at 4:17 PM, Hannahmay123 said:

Hi @tuanphan I have used this code - its great!!! Can you help me with the alignment of this button? Its slightly larger than the input field. I would also like the input field "email address" to be aligned to the left. 

www.shotjuice.co.uk 

password : shot juice654373145_Screenshot2021-10-01at10_15_52.png.f00fff32bf45433cc92567bb59547c3e.png

Add to Design > Custom CSS

footer.sections input {
    text-align: left !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...
On 3/18/2020 at 1:25 AM, tuanphan said:

Try adding to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.newsletter-block .newsletter-form-body {
    display: flex;
}
.newsletter-form-fields-wrapper.form-fields {
    width: 70%;
}
.newsletter-form-button-wrapper.submit-wrapper {
    width: 30%;
}
.newsletter-form-button-wrapper.submit-wrapper button {
    width: 100%;
}
}

 

I tried this but it all overlaps each other on mobile and doesn't do anything on desktop

Screen Shot 2022-04-23 at 10.10.50 AM.png

Screen Shot 2022-04-23 at 10.10.58 AM.png

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.