Hi,
Does anyone know how to change the font size in collapsible content? (for Mobile only. It looks good on Desktop)
On mobile, it’s a bit too big and it runs to 2 line right now.
Link: https://1nytifok700xant8-57105678419.shopifypreview.com
Topic summary
A user seeks to reduce the font size of collapsible content headings on mobile devices, as the current size causes text to wrap to two lines while desktop display remains acceptable.
Proposed Solution:
Another participant provides CSS code to be added above the </body> tag in theme.liquid:
- Target:
h2.collapsible-content__heading.h1 - Mobile breakpoint: max-width 767px
- Suggested font size: 22px
Additional CSS targets accordion elements:
h3.accordion__title h4: font-size 12pxaccordion summary: align-items center
Implementation Path:
Online Store → Edit Code → theme.liquid
The solution uses media queries to apply styling exclusively to mobile viewports, leaving desktop presentation unchanged. The discussion appears resolved with a working code snippet provided.
Hello,
Please add the given code above in theme.liquid
online store >> edit code >> theme.liquid
@media screen and (max-width: 767px) { h2.collapsible-content__heading.h1 { font-size: 22px!important; } .accordion summary{ align-items:center!important; } h3.accordion__title.h4 { font-size: 12px!important; } }after added look like that
1 Like