Modern_B Posted March 18, 2020 Share Posted March 18, 2020 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 Link to comment
tuanphan Posted March 18, 2020 Share Posted March 18, 2020 Incorrect password. Can you check again? 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
Modern_B Posted March 18, 2020 Author Share Posted March 18, 2020 3 minutes ago, tuanphan said: Incorrect password. Can you check again? Hmm how strange, worked a minute ago. Changed it to: TEMPB1803 Link to comment
Solution tuanphan Posted March 18, 2020 Solution Share Posted March 18, 2020 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%; } } CesO 1 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
Modern_B Posted March 18, 2020 Author Share Posted March 18, 2020 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
mriddell91 Posted January 27, 2021 Share Posted January 27, 2021 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
mriddell91 Posted January 28, 2021 Share Posted January 28, 2021 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
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 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
Hannahmay123 Posted October 1, 2021 Share Posted October 1, 2021 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 Link to comment
tuanphan Posted October 3, 2021 Share Posted October 3, 2021 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; } 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
nobody Posted April 23, 2022 Share Posted April 23, 2022 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 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