Separate product images on collection page

Shopify Discussion
1

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.PNG
IMG_0100.PNG750×1334 100 KB

IMG_0097.PNG
IMG_0097.PNG750×1334 127 KB

2

Hi @danielcorrea

Your store URL please

3

https://lelaloot.com/

4

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
Screenshot_4.jpg416×556 21.6 KB

5

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

6

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 :slightly_smiling_face: