Portfolio Projects Side by Side on Mobile | Squarespace 7.1

What does this code do?

This code snippet will allow you to have your portfolio projects in two columns on mobile.

Add a Portfolio

Add a portfolio to your Squarespace Website and choose Portfolio 2. This effect will only work on the section that is automatically added within a portfolio page and not on other sections that use image blocks or summary blocks to display projects.

Set the Layout to either Grid: Overlay or Grid: Simple.

Code Snippets

Copy and paste the appropriate code into Design > Custom CSS

/* Grid: Simple 2 Column Layout */
@media only screen and (max-width:640px) {
  .portfolio-grid-basic {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .portfolio-grid-basic .grid-item {
    width: 45%;
  }
}

/* Grid: Overlay 2 Column Layout */
@media only screen and (max-width:640px) {
  .portfolio-grid-overlay {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .portfolio-grid-overlay .grid-item {
    width: 45%;
    padding-bottom: 40% !important;
    /* Vertical Spacing Between Projects */
  }
}

How To Use It

1. Create your portfolio page.

2. Copy and paste the code as indicated above.