Hey, I want to decrease the space here just by a tiny bit, how do I do this?
https://charmente.com/products/charmente-flared-work-yoga-pants
Topic summary
A user seeks to reduce spacing on their product page between specific elements. An image shows the area in question on their Shopify store.
Two CSS solutions were provided:
Solution 1 (LizHoang):
- Navigate to Edit code → base.css file
- Add CSS targeting
.product__accordionwithmargin-top: 0 !important; - Includes a before/after screenshot showing reduced spacing
Solution 2 (DaisyVo):
- Navigate to Edit code → theme.liquid file
- Insert CSS above the
</head>tag - Targets both
.payment-badges-blockand.product__accordionelements - Sets
margin-bottomandmargin-topto 0 - Provides step-by-step screenshots and visual result
Both approaches use CSS to eliminate top/bottom margins on accordion elements. The discussion remains open pending confirmation from the original poster on whether either solution worked.
Hi @Simon159
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
.product__accordion.accordion.accordion--medium.accordion--top-border.quick-add-hidden {
margin-top: 0 !important;
}
Result
Bet,
Liz
Hi @Simon159
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ
Here is the code for Step 3:
{% style %}
.payment-badges-block {
margin-bottom: 0 !important;
}
.product__accordion {
margin-top: 0 !important;
}
{% endstyle %}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.