Grid Summary Items in Two Columns on Mobile

In both Squarespace 7.0 and 7.1, you can choose to display your blog posts and products by using a Grid Summary Block. This block has the items display in a grid format that is responsive to different screen size.

However, it also has the items stack into one column on mobile. If you have a lot of items being displayed this may mean a lot of scrolling for your viewers.

In this video, I show you how to have your grid summary items display in two columns on mobile. All the code used in the video is provided below.

The following code is used in the video.

@media only screen and (max-width: 640px) {
.summary-item-list {
display: flex;
flex-wrap: wrap;
}
.summary-item {
width: 45% !important;
margin: 4vw 2vw !important;
}
}

Here are some other posts you may like:

• Style Image Caption on Hover in Squarespace 7.1

• Autoplay Carousel Summary Blocks

• Add an Arrow to the Read More Blog Link