Separate product images on collection page

danielcorrea
Explorer
56 0 14

Hi, I would like to increase the distance between products on the collection page. I add an image of my store and another example image showing the result I want. I use Dawn Theme.

IMG_0100.PNGIMG_0097.PNG

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
6915 1305 1333

Hi @danielcorrea 

Your store URL please

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

danielcorrea
Explorer
56 0 14
Dan-From-Ryviu
Shopify Partner
6915 1305 1333

Add this code at the bottom of your base.css file

@media screen and (max-width: 749px) {
#product-grid.grid {
    column-gap: 16px;
}
.grid--2-col-tablet-down .grid__item {
    width: calc(48% - var(--grid-mobile-horizontal-spacing) / 2);
}
}

Screenshot_4.jpg

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

danielcorrea
Explorer
56 0 14

Thank you, but can I make the images a little bit bigger?As you can see in the exemple store image, the space between products images and page limits is less, and also between products images with each others. Please, I would appreciate your help

Adenan
Tourist
9 2 2

hi ^^, try this:

add this code on your CSS file, at the bottom.

/* COLLEDTION SPACING EDIT */
@media screen and (max-width: 749px) {
.page-width {
    margin: 0 auto;
    padding: 0;
    width: 100vw;
}

.grid li {
    padding: 8px;
}
}

 

Let me know if that work 🙂

Adenan K.
Helping with your technical queries! If I've assisted you, consider buying me a little espresso (click here ✌️) to support my efforts.
Happy coding!