Newsletter block formatting to suit mobile

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

Incorrect password. Can you check again?

3 minutes ago, tuanphan said:

Incorrect password. Can you check again?

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

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!

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

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? 

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

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 juice

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 juice

Add to Design > Custom CSS

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

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