Resize Related Products | Squarespace 7.1

What does this code do?

This code snippet will allow you to resize the related products on product pages for multiple screen sizes in Squarespace 7.1.

Code Snippet

Copy and paste this code into Design > Custom CSS.

/* Resize Related Products */
.ProductItem-relatedProducts .list-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between; /* space across the width of the page */
  grid-column-gap: unset !important;
  grid-row-gap: unset !important;
}

@media only screen and (min-width: 900px) {
  .ProductItem-relatedProducts .list-grid .grid-item {
    width: 23%; /* column of 4 on desktop */
  }
}

@media only screen and (max-width: 900px) and (min-width: 640px) {
  .ProductItem-relatedProducts .list-grid .grid-item {
    width: 30%; /* column of 3 on tablet*/
  }
}

@media only screen and (max-width: 640px) {
  .ProductItem-relatedProducts .list-grid .grid-item {
    width: 45%; /* column of 2 on mobile */
  }
}

The code is set up to have the related products be in four columns on screens larger than 900px, two columns on screens smaller than 640px, and three columns on screens between those sizes. If desired, you can customize the widths to change the number of columns.

Note: This code will have the products stretch to fill the width of the screen. To left-align the products change “justify-contents” to “flex-start” instead of “space-between”.

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the widths to change the number of columns displayed at each screen size.