MommyHadALittleOne Posted November 4, 2022 Share Posted November 4, 2022 I have been looking for code for the longest to make my newsletter sign up field horizontal/inline and I haven't been able to successfully do that. I would like to do this for desktop and mobile. Below is how it currently looks with handwritten notes of how I want it. Link to comment
Ziggy Posted November 4, 2022 Share Posted November 4, 2022 Can you share your website URL? I can see that this might work for desktop, but it won't work for mobile like that, the text would be far too long to fit inline on a mobile screen unless the font was tiny. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
MommyHadALittleOne Posted November 4, 2022 Author Share Posted November 4, 2022 (edited) 6 minutes ago, Ziggy said: Can you share your website URL? I can see that this might work for desktop, but it won't work for mobile like that, the text would be far too long to fit inline on a mobile screen unless the font was tiny. @Ziggy mommyhadalittleone.com x your help is greatly appreciated 🙂 Edited November 4, 2022 by MommyHadALittleOne Link to comment
Ziggy Posted November 4, 2022 Share Posted November 4, 2022 Thanks! Can you tell me what you've already done to the newsletter form to make the elements not stack? What custom coding have you added? Typically if you have a newsletter form you can easily have the 3 fields side-by-side, but they look like they are stacking because that element is being restricted in width by the other newsletter elements (title/description/button/disclaimer) that are displaying on either side. What is your desired position of all of the elements on desktop? Could you very roughly sketch them out? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ziggy Posted November 4, 2022 Share Posted November 4, 2022 Playing around in chrome developer tools, I managed to put the inputs side-by-side, but they then make the description and disclaimer very squashed: Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
MommyHadALittleOne Posted November 4, 2022 Author Share Posted November 4, 2022 20 minutes ago, Ziggy said: Playing around in chrome developer tools, I managed to put the inputs side-by-side, but they then make the description and disclaimer very squashed: Here is what I have been using: ///Newsletter Block Formatting .newsletter-block .newsletter-form-field-element { font-family: "apres" !important; font-weight: 200; font-size: 12.5px; letter-spacing: 0.9px; text-transform: none; border-radius: 0px !important; background: transparent !important; border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; border-bottom: solid 2px #FFFFFF !important; } .newsletter-block .newsletter-form-header-title { font-size: 60px; line-height: 60px; letter-spacing: 2px; font-family: 'Futura' !important; text-align: center; text-transform: none; } .newsletter-form-field-element::-webkit-input-placeholder { color: #000 !important; } .newsletter-form-button { background: #000 !important; padding: 11px 30px 14px 30px !important; border-radius: 2px !important; border-color: #FBD40C !important; text-transform: uppercase; font-size: 25px !important; font-family: OstrichSans-Medium!important; font-weight: 900 !important; letter-spacing: 1.5em; color: #fff !important; } @media only screen and (max-width: 640px) { .Footer .newsletter-form-field-element { background: none !important; border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; border-radius: 0px !important; border-bottom: solid 2px #FFFFFF !important; } } //----------// .newsletter-block .newsletter-form-wrapper { padding: 0; background: none; } @media only screen and (min-width:820px) { .newsletter-block .newsletter-form { display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; -webkit-align-items: center; } .newsletter-block .newsletter-form-header { flex: 2; -webkit-flex: 2; text-align: left; } .newsletter-block .newsletter-form-header-title, .newsletter-block .newsletter-form-header-description p { text-align: left; } .newsletter-block .newsletter-form-header-description p { margin: 10px 0 0; } .newsletter-block .newsletter-form-header-title { font-size: 25px; margin-bottom: 0; } .newsletter-block .newsletter-form-body { flex: 3; -webkit-flex: 3; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: flex-end; -webkit-justify-content: flex-end; } .newsletter-block .newsletter-form-fields-wrapper { flex: 2; -webkit-flex: 2; } .newsletter-block .newsletter-form-field-wrapper { width: 95%; } } ------ Also attached is what another drawing of what I would like it to look like. How you have it is good. @Ziggy Link to comment
Ziggy Posted November 4, 2022 Share Posted November 4, 2022 Firstly, I would suggest that you remove the newsletter description and disclaimer text and put that text into text blocks as that will simplify things. Can you do that and let me know when that's done? Can you make sure the newsletter for is set to Float, make the newsletter block as wide as possible and temporarily remove everything in the Custom CSS below the //----------//? I can then hopefully get you any CSS you might still need to get the look right. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ziggy Posted November 4, 2022 Share Posted November 4, 2022 This should help keep everything on one line: .newsletter-block .newsletter-form-field-element { max-width: 200px; } MommyHadALittleOne 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
MommyHadALittleOne Posted November 4, 2022 Author Share Posted November 4, 2022 54 minutes ago, Ziggy said: This should help keep everything on one line: .newsletter-block .newsletter-form-field-element { max-width: 200px; } Thank you so so so so so so much!!!!!!!!!!!!! I had to do some work things so I couldn't respond but that worked AMAZINGGGG @Ziggy Link to comment
Ziggy Posted November 4, 2022 Share Posted November 4, 2022 8 minutes ago, MommyHadALittleOne said: Thank you so so so so so so much!!!!!!!!!!!!! I had to do some work things so I couldn't respond but that worked AMAZINGGGG @Ziggy Not a problem, really glad that helped! If you get a chance can you mark my post as the solution to your question, and give me a thumbs up? Thanks! MommyHadALittleOne 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? 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