Jump to content

Two columns with different text styles in accordion tool

Recommended Posts

Hi and what a helpful thread!  Thank you for sharing your knowledge!

When I open the items in my accordion, I would like to see two columns of text : 

1) The one on the left would be a plain text enumeration without background. (My 3 accordion items all have different text lengths).

2) The column on the right would be quoted text in italic with a colored background. 

This is what I have for now...  image.thumb.png.2e7498126a74d040c2b937c3373bcc2e.png

 

Any idea how I could achieve that?    

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

On 12/29/2021 at 8:55 AM, mhbreton said:

Here is the page.  I tried adding an image on the right to reach my goal, but ideally, I would just have text on a white background on the left and italic text over an orange background on the right...  

https://groundhog-reed-3m4m.squarespace.com/our-sevices-2

Thanks for your help!

I see you solved with these code

@media screen and (min-width: 768px) {
    .accordion-item__description {
        columns:2;
        column-gap: 20px
    }
}

.accordion-item__description {
    max-width: unset !important;
    padding: 10px !important
}

li:nth-child(1) .accordion-item__description:after {
    content: "";
    display: block;
    width: 100%;
    height: 160px;
    background-image: url(https://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4e5c136b3883d66713077/1640293825396/coaching_testimonial_1.pnghttps://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4e5c136b3883d66713077/1640293825396/coaching_testimonial_1.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px
}

li:nth-child(2) .accordion-item__description:after {
    content: "";
    display: block;
    width: 40%;
    height: 160px;
    background-image: url(https://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4d87c26c08f5e4b1fa4e4/1640290428962/diamond_outline_2.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px
}

With 2 different background, seems impossible. You can consider using Accordion Plugin, instead of Accordion Block.

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
  • 3 weeks later...

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.