How to make collapsible row text smaller?

How to make collapsible row text smaller?

Lucas1200
Excursionist
36 0 7

Scherm­afbeelding 2024-09-10 om 20.11.10.png

My collapsible row title and answer text are to big and I want it smaller.

My store id is: 2e208a.myshopify.com

 

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
8250 1978 2426

Hi @Lucas1200 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

 

.product__accordion .accordion__content {
    font-size: 1.5rem;
}

 

And Save. 

result:

Made4uoRibe_0-1725992766230.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Lucas1200
Excursionist
36 0 7

And how to make the title's smaller of the collapsible row? 
And how to make the font weight the same? I see that de awnser text has a bigger fontweight.

Made4uo-Ribe
Shopify Partner
8250 1978 2426

Yes, I only adjust .1rem for the font. If you like the title and the content check this one below. 

Same Instruction. 

 

/* Header */
.accordion h2.h4.accordion__title {
    font-size: 12px;
}
/* Content */
.product__accordion .accordion__content {
    font-size: 10px;
}

 

And Save. 

result:

Made4uoRibe_0-1726066946904.png

Note: you can adjust the sizes you want. 

Also for this question "And how to make the font weight the same?" Do you want the font weight same on the header title? If it is replace this code. 

 

/* Header */
.accordion h2.h4.accordion__title {
    font-size: 12px;
}
/* Content */
.product__accordion .accordion__content {
    font-size: 10px;
    font-weight: 600;
}

 

And save. 

result:

Made4uoRibe_1-1726067084162.png

it have same on the title. 

Made4uoRibe_2-1726067126239.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Lucas1200
Excursionist
36 0 7

For the text it works, but the title is still not changing its size...

Do you also know how to put the content text left? Like the picture i attached.
Scherm­afbeelding 2024-09-13 om 13.20.38.png

PageFly-Richard
Shopify Partner
4661 1068 1725

 

Hi @Lucas1200 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.accordion__title,.accordion__content {
    font-size: 14px;
    font-weight: 500;
}
</style>

PageFlyRichard_0-1726014518556.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

Lucas1200
Excursionist
36 0 7

For the font-weight it works, but the title is still not changing its size...

Do you also know how to put the content text left? Like the picture i attached.
Scherm­afbeelding 2024-09-13 om 13.20.38.png

GTLOfficial
Shopify Partner
548 116 108

Hello @Lucas1200 
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

@media screen and (min-width: 750px) {
body {
font-size: 13px !important;
}
}

result
3.png

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: [email protected] - Skype: ritesh_27dh