How to Align Text in Collapsible Content

Store Design
, , , , , , , , , , ,

Topic summary

Issue: CreatorTim needed to align collapsible content headings with their expanded answers so both start at the same vertical line across all screen resolutions.

Solutions Attempted:

  • DaisyVo suggested adding CSS to adjust the grid width via Theme Settings > Custom CSS, but this wasn’t the desired fix as it changed section width rather than alignment.
  • LizHoang provided CSS code targeting .collapsible-row-layout elements with padding-left: 21px to be added to base.css.
  • Initial attempts failed when code was added to base.css.

Resolution: CreatorTim successfully resolved the issue by adding LizHoang’s CSS code to collapsible-content.css instead of base.css. The alignment now works as intended.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hey, how can I make sure that the heading and the hidden answer are aligned in the same line once it’s opened? I want this to work across all screen resolutions.

CreatorTim_0-1737669195046.png
CreatorTim_0-1737669195046.png815×601 18.8 KB

Here’s my store: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll all the way down to the collapsible content section.)

Thanks a lot,
Tim

1 Like
2

Hi @CreatorTim

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (min-width: 1024px){
.collapsible-content-wrapper-narrow > .grid.collapsible-content__grid {
    width: 577px !important;
    margin-inline: auto;
}
}

image (17).png
image (17).png1068×679 133 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

3

Hi CreatorTim

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file base.css and add this code at the end of the file
@media screen and (min-width: 1024px){
   .collapsible-row-layout .accordion summary, 
   .collapsible-row-layout .accordion .accordion__content {
     padding-left: 21px;
   }
}

Result:

LizHoang_0-1737685814117.png
LizHoang_0-1737685814117.png1187×781 35.8 KB

Best,
Liz

1 Like
4

Hey, I added it to base.css, but nothing changed. It’s still the same, what could be causing this?

5

Hi, I don’t want to change the width of the section.

I want to align the answer and the heading so they both start at the same point, on the same line. How can I do that?

CreatorTim_0-1737741642271.png
CreatorTim_0-1737741642271.png400×295 26.8 KB

Thank you!

6

you can try add this code

.collapsible-row-layout .accordion summary, .collapsible-row-layout .accordion .accordion__content {

padding-left: 21px !important;

}

7

Doesn’t work…

8

Ohh got it. I added it to collaspbile-content.css and it works