Text or Images in Two Columns on Mobile

What does this code do?

This code snippet will allow you to keep text or images that are placed in two columns on desktop in two columns when viewed from a mobile device.

Note: Looking to put your navigation in the footer into two columns on mobile? Check out this code snippet here.

WARNING: This technique can vary greatly site to site and may require customizing the code.

Create Two Columns

In order for this code to work you must have the Squarespace Blocks in two columns on desktop. You can do this by dragging on of the blocks beside the other. If you have other block in this section, this will affect those as well or the code may not work at all. So it works best if these blocks are in a section by themselves.

The Squarespace Editor using a 12 column system. By placing two blocks beside each other, they each take up 6 columns and Squarespace gives the blocks a class called “sqs-col-6”. The code below, sets sqs-col-6 classes to a width of 50% when on mobile. If you have not placed the blocks correctly, it will not have the class sqs-col-6 and the code will not work.

Code Snippets

Copy and paste the following code in Design > Custom CSS.

Squarespace 7.0

/*Two Columns on Mobile */
@media only screen and (max-width: 640px) {
  #PAGEID {
    .sqs-col-6 {
      width: 50% !important;
      float: left !important;
    }
  }
}

Squarespace 7.1

/*Two Columns on Mobile */
@media only screen and (max-width: 640px) {
  #COLLECTIONID #page .page-section:nth-of-type(1) {
    .sqs-col-6 {
      width: 50% !important;
      float: left !important;
    }
  }
}

How To Use It

1. Place two blocks (such as image or text blocks) beside each other.

2. Copy and paste the code as indicated above.

3. To learn how to find a collection id or page id check out our Start Here guide.