Hi there,
I am trying to make them into two equal columns.
Can someone please help?
Thanks!
Topic summary
Goal: make collapsible content display in two equal columns in a Shopify theme.
Proposed solution: add custom CSS in Assets/collapsible-content.css to split .accordion items into two 50% columns using nth-child selectors and floats, plus a clearfix for .grid–1-col. The comment line in the snippet is optional.
Status: the provided CSS did not match the requester’s desired layout. The requester shared a screenshot of the target look. The helper asked for the store URL and more specific requirements (e.g., gaps, exact arrangement), and showed an example of what the initial request would produce (one column split into two).
Latest update: the requester provided a preview URL and password so the helper can inspect and tailor the CSS.
Outcome: no resolution yet; next step is a review of the live setup and refinement of the CSS based on the desired visual. Images/screenshots are central to clarifying the expected layout.
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.
Hi Beaux,
thank you so much!
i will try it.
do i need to put
/******* CSS OVERIDES *******\
this part too?
Nah it is just to know where to find it later. These are optional comments.
Thank you for the answer! but, that is not exactly what i wanted.
I want them to be like this. Could you be able to help me out?
Thank you!
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:
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.