Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Modern_B

Newsletter block formatting to suit mobile

Question

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

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

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%;
}
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
3 minutes ago, tuanphan said:

Incorrect password. Can you check again?

Hmm how strange, worked a minute ago. Changed it to: TEMPB1803

Share this post


Link to post
  • 0
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!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...