Products Side by Side on Mobile | Squarespace 7.1

What does this code do?

This code snippet will allow you to structure a your products in two columns on mobile.

Note: The product layout for mobile in Squarespace 7.0 will depend on the template. The Brine Family Templates have a product page that displays products in this layout automatically.

Add a Shop

Add a shop to your Squarespace Website. This effect will only work on the section that is automatically added within a shop page and not on other sections that use image blocks to display featured products.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
  .products .list-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .products .grid-item {
    width: 46%;
  }
}

How To Use It

1. Create your shop page.

2. Copy and paste the code as indicated above.