Products Side by Side on Mobile in Squarespace 7.1
** Updated September 11, 2023 **
As you know, a mobile friendly website is extremely important for Search Engine Optimization. Squarespace helps us out by automatically converting your website to a mobile version. However, there are usually some design aspects that I like to change. One of these is the mobile view of Squarespace Products.
In squarespace 7.0, the layout of your product pages will completely depend upon the template you have chosen. If you would like them to be side by side in two columns, then make sure you choose a template that has this layout already. For example, the templates in the Brine Family already support this side by side view.
In squarespace 7.1, when you create a product page you can choose which layout you would like your products to have. One of the layouts is a grid layout. In the Squarespace Editor, you can then choose how many columns you would like to have.
However, when you flip over to the mobile view you'll see that it automatically stacks your products.
If you have a ton of products, that means a lot of scrolling for your visitors and some of your products further down your page might not get seen. In this case, it could be helpful for you to have the products display side by side.
In this video, I show you how to get products to display in two columns when viewed from a mobile device. All the code used in the video is provided below.
The following code has been updated since the video was recorded.
/* 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%;
}
}Tip: If your products are still in one column, try making the width smaller.
