A Shopify store owner using the Debut theme seeks to reduce padding on their collection list and adjust the layout to display three collections per row on desktop and one per row on mobile.
Initial Problem:
Solutions Provided:
For padding removal:
div#shopify-section-1589465400211 { padding: 0; }
div#shopify-section-162389089231b19f30 { padding: 0; }
For responsive layout (3 columns desktop, 1 column mobile):
.grid__item classes with media queriestheme.scss.liquid file via Online Store → Theme → Edit code → AssetsOutcome:
The issue was successfully resolved. The user confirmed one solution worked perfectly and requested additional help removing top/bottom margins, which was also addressed with CSS targeting the specific section IDs. The conversation concluded with the user thanking the helper and offering to reach out via email for future assistance.
Hi,
I’m using the debut theme and need help reducing the padding on my collection list and is there a way to have three collections per row on the desktop view and one collection per row on the mobile view?
My website is https://aydan-totten.myshopify.com/
Hello @AydanTotten ,
Can you please share screenshot for this?
@AydanTotten ,
Do you talking about this section?
Yes that is the section @MandasaTech
div#shopify-section-1589465400211 {
padding: 0;
}
div#shopify-section-162389089231b19f30 {
padding: 0;
}
@media only screen and (max-width: 600px) {
li.grid__item.small--one-half.medium-up--one-third {
width: 100%;
}
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
#shopify-section-1589465400211 .grid__item.small–one-half.medium-up–one-third {
width: 33.33%;
}
@media(min-width: 280px) and (max-width: 767px){
#shopify-section-1589465400211 .grid__item.small–one-half.medium-up–one-third {
width: 100%;
}
}
@oscprofessional this has just made the collection pictures the width of the page for all views.
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
#shopify-section-1589465400211 .grid__item.small–one-half.medium-up–one-third {
width: 33.33%;
}
@media(min-width: 280px) and (max-width: 767px){
#shopify-section-1589465400211 .grid__item.small–one-half.medium-up–one-third {
width: 100%;
}
}
div#shopify-section-1589465400211 {
padding: 0;
}
div#shopify-section-162389089231b19f30 {
padding: 0;
}
@media only screen and (max-width: 600px) {
li.grid__item.small--one-half.medium-up--one-third {
width: 100%;
}
}
use this
Hi @AydanTotten .
I’m Richard Nguyen from PageFly- Free Landing Page Builder
You can go to Online store => themes => actions => edit code and add this code on file theme.scss.css
@media screen and (max-width: 767px){
.collection-grid-item__overlay {
position: relative !important;
width: 50% !important;
height: 50% !important;
left: 80px !important;
}
}
Hope this answer helps.
Best regards,
Richard | PageFly
This has worked perfectly, is there a way to remove the top and bottom margin/padding of the collections list section?
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
#shopify-section-1589465400211 {
padding: 0px;
}
#shopify-section-162389089231b19f30 {
padding: 0px;
}
Thank you @MandasaTech I will email you if I need any more help with my website.
Ok @AydanTotten
Thank you 