Niklaschr Posted February 9 Share Posted February 9 Hi! How do I make my accordion do this when expanded? PS:Picture above is from Figma This is how I currently have it on my website I have styled the accordion through CSS Any help would be nice! Link to comment
Ziggy Posted February 10 Share Posted February 10 Can you share your URL and this page? Also the styling CSS that you're using currently? Thanks! 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
Niklaschr Posted February 18 Author Share Posted February 18 Hi! Sorry for late response Davmar.no/ny-hjemmetjenester PW: Password123 Using this, + some lines regarding the icon, but that isn't relevant to the question @accordionTitleBackground: #fcfcfc; section[data-section-id="63e5407deda50f66a15788c2"]{ // Accordion title background .sqs-block-accordion .accordion-item__title-wrapper { background-color: @accordionTitleBackground; } span.accordion-item__title { font-weight: 500 !important; color: black } // Accordion title padding .accordion-item__title-wrapper { padding-left: 50px !important; padding-right: 20px !important; border: 1px solid #64D767; border-radius: 15px; filter: drop-shadow(0px 14px 42px rgba(20, 20, 43, 0.14)); margin: 10px; } Thanks in advanced! Link to comment
tuanphan Posted February 21 Share Posted February 21 On 2/18/2023 at 9:10 PM, Niklaschr said: Hi! Sorry for late response Davmar.no/ny-hjemmetjenester PW: Password123 Using this, + some lines regarding the icon, but that isn't relevant to the question @accordionTitleBackground: #fcfcfc; section[data-section-id="63e5407deda50f66a15788c2"]{ // Accordion title background .sqs-block-accordion .accordion-item__title-wrapper { background-color: @accordionTitleBackground; } span.accordion-item__title { font-weight: 500 !important; color: black } // Accordion title padding .accordion-item__title-wrapper { padding-left: 50px !important; padding-right: 20px !important; border: 1px solid #64D767; border-radius: 15px; filter: drop-shadow(0px 14px 42px rgba(20, 20, 43, 0.14)); margin: 10px; } Thanks in advanced! Password123 Incorrect password 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
Niklaschr Posted February 26 Author Share Posted February 26 What? try again, I change it back to Passord123Davmar.no/ny-hjemmetjenester Link to comment
Solution Ziggy Posted February 27 Solution Share Posted February 27 You'll want to replace the last part of your CSS with this: .sqs-block-accordion .accordion-item { padding-left: 50px !important; padding-right: 20px !important; border: 1px solid #64d767; border-radius: 15px; filter: drop-shadow(0px 14px 42px rgba(20,20,43,.14)); margin: 10px; } This new code includes the question and answer with the border and padding. 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
Niklaschr Posted February 27 Author Share Posted February 27 Thank you! Worked as a charm 🙂 Ziggy 1 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