How to align Collapsible Content section width with rich text section width (Dawn 11.0.0 theme)

[DRAWandCARE]

Hello everyone!

I’m wondering how I can align the width of the Collapsible Content section with the width of the rich text section on a product page (Dawn 11.0.0 theme).

I need the Collapsible Content section to be the same width as the rich text section.

Website link: https://www.drawandcare.com/
Password: DRAW5848draw3729lvivCaRe!123

I would greatly appreciate any assistance!

[David_SHT]

Hi @DRAWandCARE

This is David at SalesHunterThemes.

Thank you for your question.
Follow this path:

Themes => edit code => asset => base.css

and add this code to bottom of the file base.css

@media screen and (min-width: 750px){
.collapsible-content-wrapper-narrow {
padding-inline: 5rem;
 max-width: var(--page-width);

}
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[Dan-From-Ryviu]

Hi @DRAWandCARE

You can do that by adding this CSS code at the bottom of your base.css file in Online store > Themes > Edit codes

.collapsible-content-wrapper-narrow {
padding-right: 5rem !important;
padding-left: 5rem !important;
max-width: var(--page-width) !important;
}

[DRAWandCARE]

Thank you so much! It worked great!

Also, is there any way to make the accordion on the FAQ page not full-width like on the product pages? Thank you!

[Dan-From-Ryviu]

So please add the code above to Custom CSS ofCollapsible section on product page so it will be changed for product page only

[DRAWandCARE]

Unfortunately, this doesn’t work for Custom CSS on this section.

[Dan-From-Ryviu]

Please try to change code like this

.collapsible-content-wrapper-narrow {
padding-right: 5rem !important;
padding-left: 5rem !important;
max-width: 1000px !important;
}

[DRAWandCARE]

Yes! Thank you so much for such a quick and professional help! It worked perfectly!

[Dan-From-Ryviu]

I’m glad to help!