Increase space between product cards on collection pages for mobile - Dawn theme

Store Design
, , ,
1

Hello!

How do I increase the space between the product cards on the collection pages for mobile?

They are currently too close together

This code worked for increasing the space on the desktop view but the issue remains on mobile:

@media screen and (min-width: 750px) {
.product-grid.grid {
    margin-left: -25px;
}
.product-grid .grid__item {
    padding-left: 25px;
}
}
1 Like
2

Hi @Element1 ,

Im not sure what specific you want to do. But this code wont be working on mobile because its only on the min-width. if you want to work this code in mobile change it into max width.

@media screen and (max-width: 750px) {
.product-grid.grid {
    margin-left: -25px;
}
.product-grid .grid__item {
    padding-left: 25px;
}
}

i hope it help.

1 Like
3

To increase the space between the product cards on collection pages for mobile devices, you can modify the existing code by adding a media query specifically for mobile screens. Here’s an example:

/* Increase space between product cards on mobile */
@media screen and (max-width: 749px) {
  .product-grid.grid {
    margin-left: -15px;
    margin-right: -15px;
  }
  .product-grid .grid__item {
    padding-left: 15px;
    padding-right: 15px;
  }
}

In the code above, the media query targets screens with a maximum width of 749 pixels, which corresponds to mobile devices. It adjusts the margin-left, margin-right, padding-left, and padding-right properties to increase the space between the product cards.