Jump to content

Make the background continue behind the text when expanded

Go to solution Solved by Ziggy,

Recommended Posts

  • Replies 6
  • Views 315
  • Created
  • Last Reply

Top Posters In This Topic

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 

 ☕ Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 

Link to comment
  • 2 weeks later...

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
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution

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 

 ☕ Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.