Separate product images on collection page

[danielcorrea]

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.

[Dan-From-Ryviu]

Hi @danielcorrea 

Your store URL please

[danielcorrea]

https://lelaloot.com/

[Dan-From-Ryviu]

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);
}
}

[danielcorrea]

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]

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 🙂