Hi everyone,
I’m using the Savor theme for my store and would like to change the spacing between the accordion menus. I’ve already set them up as tightly as I can in the backend, and this seems to be the most compact style I can currently achieve. However, I’m still not satisfied and would like to reduce their line height.
my website: https://sunevertech.com/
You can add this code to Custom CSS of that section and check again
summary { padding-block: 8px; }
Hi @Sunever ,
Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file
.accordion summary.details__header {
padding: 7px 0;
}
Hi @Sunever,
Please go to Customize > Sections > Custom CSS and add code:
summary {
padding-block: var(--padding-xs);
}
You can use below code:
summary {
padding-top: 0px;
}
After applying properly, it shall look like this below:
Hi @namphan,
The code you provided is very effective, thank you. In addition, can you help me look at this page: https://sunevertech.com/pages/faq I don’t know why there is a large blank space at the bottom, which is not the result I want. I have tried the options in the background, but there is no option to eliminate the problem at the bottom.
This problem occurs on both mobile and PC devices. It affects my entire device.
Hi @Sunever ,
I hope you are doing well! I am sending the fix of - https://sunevertech.com/pages/faq
.details summary.details__header {
padding-block: 4px !important;
}
Copy the above code and paste to the middle of theme.css or base.css.
Please let me know if this works for you or feel free to message me if you have any queries or need any help!
Hi! If you want to reduce the spacing between accordion menu items beyond what the backend allows, you’ll likely need to add some custom CSS. For example, you can try something like this:
.accordion-item {
line-height: 1.2; /\* Adjust this number lower for tighter spacing \*/
padding: 4px 0; /\* Reduce top/bottom padding \*/
}
You can add this in your theme’s custom CSS section or via the theme editor if it supports it. Just tweak the values until you get the look you want. Also, make sure to clear your cache or refresh after saving to see the changes.
Hello @Emma170,
Thank you for your answer, but I want to modify this place now. There is a large blank area on both the PC and mobile sides. I want to modify it and make it smaller.
Hi @Sunever,
I checked and did you solve it?
Hi @namphan
yes, i solve it
I understand what you mean. That blank space is likely caused by extra padding or margin in your theme’s CSS. You can reduce it by adding custom CSS like this:
.faq-section {
margin-bottom: 10px; /\* Adjust this number to reduce space \*/
padding-bottom: 10px;
}
If you’re editing directly in Shopify, go to ‘Online Store’ → ‘Themes’ → ‘Edit Code’ → ‘Assets’ → find your CSS file and paste it there, or use the ‘Customize’ → ‘Custom CSS’ section if available. Once saved, refresh the page to see the change.