Increase the space between the product description and the collapsible tabs on a product page.
Suggested fix 1: Add padding-bottom to the description container via CSS (target the product description block, e.g., .main-product__block .m-product-description). This increases space inside the description area.
Suggested fix 2 (most recent, with screenshot): In main.css, change the margin-top of .main-product__block-custom_liquid (e.g., from 5px to 15px or more). This increases space above the collapsible tabs.
Alternative approach: Insert custom CSS in theme.liquid before . Multiple replies recommended this, but their code snippets were missing in the posts.
Notes: “Padding” adds space inside an element; “margin” adds space outside it. Collapsible tabs are expandable sections under the description. Images were shared to illustrate the spacing result.
Outcome: No confirmation from the original poster and no accepted solution. The issue appears open.
Practical next step: Try either padding on the description or margin on the collapsible tabs, adjusting pixel values to achieve the desired gap, added via product.css/main.css or theme.liquid.
Hello @lunalucenteskin
Go to online store ----> themes ----> actions ----> edit code---->main.css
search this code
.main-product__block-custom_liquid {
margin-top: 5px !important;
}
and replace with this code
.main-product__block-custom_liquid {
margin-top: 15px !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
