How can I adjust the font size of my collapsible content?

[chocolatte1234]

Link to my shop: https://6fa09b.myshopify.com/pages/skin-q-a-skin-sciences

Password: dowhad

Hello I would like to change the font size of my collapsible content (image below) both heading and text. How do I do that? Any help is appreciated! Thank you

[BSS-Commerce]

Hi @chocolatte1234

Please follow these steps:

1. From Shopify admin, select Online store → Themes.

2. Go to Actions → Edit code.

3. Find the folder, usually Assets/theme.css (or base.css), then add the following code at the end of the file:

/* Heading */
.collapsible-content__grid .accordion__title {
  font-size: 22px !important;
}

/* Content text */
.collapsible-content__grid .accordion__content p {
  font-size: 14px !important;
}

You can also resize it as you want.

I hope that it will work for you.

[chocolatte1234]

works great! Thank you!

[sambrookian]

Hi BSS-Commerce,

I tried your solution in my store, and for the most part it worked, but the bulleted lists and numbered listed inside of my collapsible rows is still staying the larger font size. The header for the collapsible row and the normally formatted text content in the dropdown reduced in size as expected. Just the bulleted lists and numbered lists did not get impacted by your code. Can you advise how to reduce the bulleted and numbered content to match the row content?

Code used:

/* Heading */ .collapsible-content__grid .accordion__title { font-size: 16px !important; }

/* Content text */ .collapsible-content__grid .accordion__content p { font-size: 16px !important; }

[NinoB97]

works good!