Getting a 2-column mobile layout on a Squarespace shop

IMG_2413.jpg

I do love me some Squarespace, but there are times where the templates just feel insufferably stiff. I was just trying to turn my single-column shop layout, which made the products look ridiculously huge and bloated, into a neat two-column layout.

After wrangling for an hour with the code, tweaking different classes willy-nilly, I finally managed to find the correct solution. And here it is, so you don’t have to suffer through the same way.

(Please note that the solution may differ depending on what template you’re using. I have only tested it with my template, so it may not work for yours.)

The Full Code

If you just want your quick and simple solution, here it is. A more detailed explanation follows after!

@media only screen and (max-width: 700px) {
  #productList .product {
    clear: none!important;
    margin-bottom: 2em;
    width: 48%;
  }
  #productList .product:nth-of-type(odd) {
    margin-right: 3%;
    clear: left;
  }
  .product img {
    max-width: 100%;
    max-height: 100%;
  }
}

Step 1. Make this layout only apply on mobile

First, we’re going to start with an @media query with a max-width specifying that we only want this layout to happen on mobile. Otherwise, this layout would apply all the time.

@media only screen and (max-width: 700px) {
}

Step 2. Turn single-column into two-column.

The second step in this is to turn the single-column layout into a two-column.

  1. Set clear to none. This will prevent the products from breaking every 3rd product, creating a consistent two-column layout.

  2. Halve the size of the products. I add a little more space so that we can have space between the products, leaving the product size at 48%.

  3. Add a little more margin at the bottom. This is mainly just an aesthetic reason to provide more breathing room between products.

@media only screen and (max-width: 700px) {
    #productList .product {
        clear: none!important;
        width: 48%;
        margin-bottom: 2em;
    }
}

Step 3. Add margin between the products.

At this point, the products are now in two columns, but very squished together. We’re going to add breathing room. We will only be affecting the left product of each row, which is selected by using :nth-of-type(odd).

  1. Set margin-right to 3%. This will add a nice space between each product.

  2. Set clear to left. If you have a long product title that takes up two or more text lines, your layout will break down. Avoid this by setting clear to left.

#productList .product:nth-of-type(odd) {
  margin-right: 3%;
  clear: left;
}

Step 4. Fit the thumbnails.

(NOTE: This solution only works with square thumbnails. I haven’t attempted to figure out a neater solution since I use square thumbnails.)

.product img {
  max-width: 100%;
  max-height: 100%;
}