css help - eliminating padding around collection list section

Solved
ransackery
New Member
7 0 1

Hi, I am using the Supply theme with some small modifications that I have done so far.

I would like to reduce the padding above and below the "Collection list" sections that I am using. In this example I have two "Collection list" sections one right after the other.

I was able to remove the header where it says "Shop for" and the link in that header where it takes you to all collections. I have limited the number of images in the row to 5. I have also forced the images to be the same size regardless of if there are 2, 3, 4, or 5 on the line. 

The spacing css has been confusing to me, though. I'll attach a screen shot in case I'm not using the right terms. 

Thanks for any help.

collection-list-reduce-space.png

0 Likes
g33kgirl
Shopify Partner
211 51 63

This is an accepted solution.

Hi @ransackery, the space after the header is being set by the main-container and the space at the bottom of the collection is being set by the divider (hr). You can add this code at the end of your CSS file (Themes -> Edit code -> Assets -> theme.scss.css) :

.main-content {
   padding-top: 10px; <-- adjust the value
}
.featured-box {
    margin-bottom: 10px; <-- adjust the value
}
.slider-section hr {
   margin-top: 0;
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
ransackery
New Member
7 0 1

Thank you! Worked exactly as I wanted.

0 Likes