Blog Posts in Two Columns on Mobile

What does this code do?

This code snippet will allow you to showcase your blog items in two columns when being viewed from a mobile device.

Set Up Your Blog

The first step is to set up your blog and make sure it is set to the correct settings.

If you are working in Squarespace 7.0, make sure that your blog is set to Grid in Design > Site Styles.

If you are working in Squarespace 7.1, make sure that the blog is set to the Basic Grid Blog style in the section editor.

Code Snippets

Copy and paste the code into Design > Custom CSS.

Squarespace 7.0

@media only screen and (max-width: 640px) {
  .BlogList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .BlogList-item {
   width: 45% !important;
   margin: 2.5% !important;
  }
}

Squarespace 7.1

@media only screen and (max-width: 640px) {
  .blog-basic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .blog-basic-grid--container {
    margin: 10px;
  }
}

How To Use It

1. Set up your blog as described.

2. Copy and paste the code as indicated above.