How can I reduce the collapsible row font size in the Stiletto theme?

Store Design
, ,

Topic summary

Reducing the collapsible row heading font size in the Stiletto theme, specifically on the FAQs page, is the goal. The heading uses the paragraph font and appears oversized, with emphasis on needing a smaller size on mobile.

Proposed solution: add custom CSS in theme.liquid above the tag. Initial snippets were unclear, then mobile-specific CSS (@media max-width: 767px) targeting a class to set font-size to 14px, followed by a more specific selector for the collapsible row heading set to 18px.

Helpers shared screenshots showing the change working on their end. The requester added the code but reports no visible change, especially when viewing on mobile.

Further steps included asking for a screenshot of where the code was pasted, which the requester provided. A revised, more specific selector was suggested, yet the requester still sees no effect.

Status: unresolved and ongoing. Key open issue is why the CSS is not applying on mobile; attachments (screenshots) were used to show results and code placement but did not lead to a fix.

Summarized with AI on January 4. AI used: gpt-5.
1

Hi there,

I am wanting to reduce the size of the collapsible row heading, it is when using the paragraph font seems to upsize. I have tried a few suggestions on here with not much luck! Theme is stiletto.

www.glowmumma.co.nz

p/w glow123

IMG_8194.jpeg
IMG_8194.jpeg1179×1780 81.5 KB

2

Hey @missjewellee

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

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

Best Regards,
Moeed

3

Hello @missjewellee

techlyser_web_0-1709016344569.png
techlyser_web_0-1709016344569.png1050×466 15.1 KB

4

Hey Moeed,

Thanks for replying! I have tried that code to no avail :disappointed_face: it is a heading but uses the paragraph font not sure if that makes any difference?

5

Hey @missjewellee

Can you tell me that on which page exactly is that? if you can share the url of that page then I can provide you the accurate code.

Best Regards,

Moeed

6

Hello, yes ok it’s

https://glowmumma.co.nz/pages/faqs

7

Hey @missjewellee

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1709022873694.png
Moeed_0-1709022873694.png377×672 18.2 KB

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

Best Regards,
Moeed

8

Hi Moeed,

Thanks so much, I can see it works for you although I have added that code to the bottom of theme file and it’s not working for me :disappointed_face: it is mobile really I am needing this for, is it because I am boring in mobile I can’t see the change?

9
  • viewing :joy:
10

Hello @missjewellee

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .fs-body-250 { font-size: 14px !important; } }

techlyser_web_0-1709091512600.png
techlyser_web_0-1709091512600.png221×285 8.12 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

11

Hey there,

Thanks for this, I can also see this works for you although when I am adding it in it doesn’t seem to work! Very odd I am putting the code as usual in theme.liquid above body but nothing :confused:

12

can you share picture of code where you paste?

13

IMG_8233.png
IMG_8233.png1179×2556 425 KB

14

Hello @missjewellee

replay the code with below code

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .collapsible-row-list-item span.collapsible-row-list-item__heading { font-size: 18px !important; } }

techlyser_web_0-1709200291821.png
techlyser_web_0-1709200291821.png221×285 8.12 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

15

Still does not work for me, I have no idea why ?‍ :female_sign: