thebellesophie Posted January 21 Share Posted January 21 Hi guys! I having trouble with my news letter block section. I am trying to change the color of the words join the tribe (sign up) button to where they can be seen when you hover or click on the button. It seems to be working on the desktop and mobile version on my computer, but every time I check it on my phone the words look completely blank and can be seen. It just shows up as a white box/button. I would also like to the change the email button to have a very light rectangle with slightly rounded corners. I like the size of the font and spacing for now but I would like the line not to be so big or wide if possible. I have used so many different css, I feel like anything I add doesn't work now. Here is everything I have added and used so far. I am happy to consolidate. Please help! Thank you so much. /* text - input button */ .newsletter-form-header-description p { margin-bottom: 0 !important; } .newsletter-block .newsletter-form-body>div { margin-top: 7px; padding-top: 8px; padding-bottom: 0px; } /* privacy - input button */ .newsletter-form-footnote p { margin-top: 0px !important; } /* Email input color */ .newsletter-form-body input, .newsletter-form-body input::placeholder { color: white !important; } .newsletter-block .newsletter-form-header-title { font-size: 10px } .newsletter-block .newsletter-form-wrapper { padding: 0px 10px; } .newsletter-block input { height: 3.em; max-width: 20em; display: block; } footer.sections input[type="text"] { border-color: white; } footer.sections input[type="text"]::placeholder { color: white !important; } .sqs-block-newsletter .newsletter-form-field-element { padding-top: 6px !important; padding-bottom: 6px !important; } button.newsletter-form-button.sqs-system-button { padding-top: 8px !important; padding-bottom: 8px !important; } // Full Underline Newsletter Form - Block Style // .newsletter-block .newsletter-form-body { padding: 0px !important; border-bottom: 1px solid !important; } // Full Underline Newsletter Form - Field Style // .newsletter-form-field-element { border: none !important; background-color: transparent !important; } // Full Underline Newsletter Form - Input Style // .newsletter-form .newsletter-form-field-element, .field.email input::placeholder, .field.email input:focus { color: #ffff !important; } Link to comment
sorca_marian Posted January 21 Share Posted January 21 Can you add the link to the site? 👨🔧👨💻 Squarespace plugins 🙋♂️ Squarespace Custom Web Development & Design Services 📅 Todoist alternative | Increase your Productivity 📹 Squarespace Tutorials for free - YouTube📹 💯🚀 I have worked on over 300 Squarespace sites with custom code for over 9 years 🙋♂️ Let's connect on LinkedIn Link to comment
thebellesophie Posted January 21 Author Share Posted January 21 I am sorry, I thought I added it already. Here you go, thank you so much! https://www.thebellesophie.com Link to comment
sorca_marian Posted January 21 Share Posted January 21 Would you like the mobile version to look like in the attached image? @media (max-width: 767px) { .newsletter-form-body .email input { text-align : center; } .primary-button-style-outline .fluid-engine .newsletter-form .newsletter-form-body .newsletter-form-button { background : #fff!important; } .newsletter-form-button span { color : #000!important; } } 👨🔧👨💻 Squarespace plugins 🙋♂️ Squarespace Custom Web Development & Design Services 📅 Todoist alternative | Increase your Productivity 📹 Squarespace Tutorials for free - YouTube📹 💯🚀 I have worked on over 300 Squarespace sites with custom code for over 9 years 🙋♂️ Let's connect on LinkedIn Link to comment
thebellesophie Posted January 21 Author Share Posted January 21 Yes, but I think I would prefer that the email button just have the underline and and the join the club look like the image you've attached! It's not possible to have them both on the same line in the mobile version right? Link to comment
thebellesophie Posted January 22 Author Share Posted January 22 If anyone knows how to fix it, I'd be so grateful! thank you. Link to comment
sorca_marian Posted January 23 Share Posted January 23 I will try to add the code this week or the next one if no other answer appears. Super busy atm 👨🔧👨💻 Squarespace plugins 🙋♂️ Squarespace Custom Web Development & Design Services 📅 Todoist alternative | Increase your Productivity 📹 Squarespace Tutorials for free - YouTube📹 💯🚀 I have worked on over 300 Squarespace sites with custom code for over 9 years 🙋♂️ Let's connect on LinkedIn Link to comment
thebellesophie Posted January 24 Author Share Posted January 24 Thank you so much! I appreciate you! 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