How to make collapsible row text smaller?

How to make collapsible row text smaller?

Lucas1200
Excursionist
44 0 9

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
10100 2398 3034

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Lucas1200
Excursionist
44 0 9

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
10100 2398 3034

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Lucas1200
Excursionist
44 0 9

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
5011 1120 1801

 

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
44 0 9

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
828 171 187

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: info@gtlofficial.com - Skype: ritesh_27dh