Grid Summary Items in Two Columns on Mobile

Responsive DesignSquarespace 7.1Squarespace 7.0

Dec 3

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.

In this video, I show you how to have your grid summary items display side by side in two columns on mobile.

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;
}
}
  