collapsible content, 2 columns

jennywi
Excursionist
41 0 6

Hi there,

 

I am trying to make them into two equal columns.

 

Can someone please help?

 

Thanks!

Replies 6 (6)

beauxbreaux
Shopify Partner
183 13 32

Hello,

 

I have a solution for you. 

 

First go to Online Store > Themes > click the 3 dot menu &and select edit code

 

In your Assets folders go to collapsible-content.css

 

At the very bottom of this file paste:

 

 

            /******* CSS OVERIDES *******\
      
 /* Select every odd accordion (1st and 3rd) and float them to the left */
.accordion:nth-child(4n-3),
.accordion:nth-child(4n-2) {
    float: left;
    width: 50%; /* Adjust the width as needed */
    box-sizing: border-box; /* Include padding and border in the width */
}

/* Select every even accordion (2nd and 4th) and float them to the right */
.accordion:nth-child(4n-1),
.accordion:nth-child(4n) {
    float: right;
    width: 50%; /* Adjust the width as needed */
    box-sizing: border-box; /* Include padding and border in the width */
}

/* Clear the float to prevent layout issues */
.grid--1-col::after {
    content: "";
    display: table;
    clear: both;
}

 

Now click save.

 

Beaux Barker
Developer
jennywi
Excursionist
41 0 6

Hi Beaux,

thank you so much!

i will try it.

 

do i need to put 

/******* CSS OVERIDES *******\ 

this part too?

beauxbreaux
Shopify Partner
183 13 32

Nah it is just to know where to find it later. These are optional comments. 

Beaux Barker
Developer
jennywi
Excursionist
41 0 6

Thank you for the answer! but, that is not exactly what i wanted. Screen Shot 2023-12-08 at 7.01.45 PM.png

I want them to be like this. Could you be able to help me out? 

Thank you!

beauxbreaux
Shopify Partner
183 13 32

What's your URL? I will have to take a look at what you have going on right now.

 

EDIT: Also by "this is not what I was looking for", If you are a little more specific with what you need I can better help. So specifying what is not correct or specifying more features could help.

For example if the code I gave you was almost what you wanted but you want a gap between the two columns, that would be helpful to know. 

 

The initial question was to to turn 1 column within a collapsible content into two columns. So it should have looked like this:
Screenshot 2023-12-08 161552.png

As this is 1 column split into two.  Anything beyond that would need to be specified.  Or if it doesn't look like this as the result I would need to know that too.

Beaux Barker
Developer
jennywi
Excursionist
41 0 6

https://44b803-4.myshopify.com/

PW: raolto

here you go