How can I reduce the spacings 1 & 2 to get a more compact view of the different items?
website: 10xfuel.com
Thanks!
Topic summary
A user seeks to reduce vertical spacing in a multicolumn layout on their Shopify Dawn theme store to create a more compact item display. Multiple helpers provide CSS solutions targeting .grid--1-col-tablet-down .grid__item with padding-bottom: 0px !important.
Attempted Solutions:
- Initial code suggested for
base.cssfile - Media query variations for responsive breakpoints (max-width: 749px, 989px)
- Alternative placement in
theme.liquidusing{% style %}tags
Current Status:
The issue remains unresolved. Despite multiple code iterations and file placement attempts (base.css and theme.liquid), the user reports no visible changes after implementing each suggestion. Screenshots show the code being added correctly, but the spacing persists.
Key Question:
The discussion lacks troubleshooting of why the CSS isn’t applying—potential issues could include cache, CSS specificity, or incorrect selector targeting. No resolution has been reached, and the user continues seeking a working solution.
Hello @10xfuel
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
.grid--1-col-tablet-down .grid__item {
padding-bottom: 0px !important;
}
Hello @10xfuel
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
@media screen and (max-width: 749px){
.grid--1-col-tablet-down .grid__item {
padding-bottom: 0px !important;
}
}
Hi! I entered this code but nothing happened: what did I do wrong?
Hi @10xfuel Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above tag
@media screen and (max-width: 989px)
.grid--1-col-tablet-down .grid__item {
padding-bottom: 0px !important;
}
Hello @10xfuel
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
@media screen and (max-width: 749px){
.grid--1-col-tablet-down .grid__item {
padding-bottom: 0 !important;
}
}
@10xfuel can you share screenshot in which file you paste code?
@10xfuel try this..
{% style %}
@media screen and (max-width: 989px)
.grid--1-col-tablet-down .grid__item {
padding-bottom: 0px !important;
}
{% endstyle %}
