How to Align Text in Collapsible Content

[CreatorTim]

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.

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

[DaisyVo]

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

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[LizHoang]

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:

Best,
Liz

[CreatorTim]

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

[CreatorTim]

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?

Thank you!

[LizHoang]

you can try add this code

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

padding-left: 21px !important;

}

[CreatorTim]

Doesn’t work…

[CreatorTim]

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