Showcase collapsible tabs smaller and closer to each other

Showcase collapsible tabs smaller and closer to each other

lunalucenteskin
Excursionist
35 0 6

How can i showcase the typography of the collapsible tabs smaller and closer to eachother. So that it looks like the 3th picture? Url is www.lunalucente.com

 

Image 14-06-2024 at 15.51.jpegImage 14-06-2024 at 15.49.jpegImage 14-06-2024 at 16.00.jpeg

Reply 1 (1)

BSSCommerce-HDL
Shopify Expert
1004 342 408

Hi @lunalucenteskin
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_1-1718375890565.png

 

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tags

BSSCommerceHDL_0-1718375876675.png

 

.main-product__block-collapsible_tab {
    margin: 0 !important;
}

.main-product__block-collapsible_tab .m-collapsible--button {
    font-size: 15px !important;
}

 

Here is result: 

BSSCommerceHDL_2-1718375939779.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency