Place Sections Beside Each Other | Squarespace 7.1

What does this code do?

This code snippet will allow you to place two sections beside each other in Squarespace 7.1.

Note: Sections will stack normally on mobile to keep your site mobile friendly. If you want to change the order the sections stack in, check out this code snippet.

Video Tutorial

Code Snippets

Option #1: Just a Couple Sections on a Page

This option is best for when you are only wanting to change a couple sections on a page and when they are similar in content size. This option is also best if you do not want the sections to be a 50/50 split.

Note that this code snippet does not gaurentee that the sections will be the same height on every screen size.

Copy and paste this code into Design > Custom CSS

/* Place Sections Beside Each Other */
@media only screen and (min-width: 641px) {
  #COLLECTIONID{
    /*section 3 on the left */
    #page .page-section:nth-of-type(3) {
      width: 50%;
      min-height: 60vh;
      align-items: center;
      float: left;
    }
    /*section 4 on the right */
    #page .page-section:nth-of-type(4) {
      width: 50%;
      min-height: 60vh;
      align-items: center;
    }
    /* section 5 is full width again */
    #page .page-section:nth-of-type(5) {
      clear: both;
    }
  }
}

Option #2: Multiple Sections (Every Other One)

This option is best when you want to gaurentee that the sections are the same height and when you want to change multiple sections on the same page.

Copy and paste this code into Design > Custom CSS

/* Place Sections Beside Each Other */
@media only screen and (min-width: 641px) {
 #COLLELCTIONID {
    #page .sections {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
        /* Section 1 and 2 are full width */
    #page .page-section:nth-of-type(1),
    #page .page-section:nth-of-type(2) {
      width: 100%;
    }
    /* Every other section starting at section 3 is on the left */
    #page .page-section:nth-of-type(n + 3) {
      width: 50%;
      .content-wrapper {
        box-sizing: border-box;
        height: 100%;
        align-items: center;
      }
    }
        /* Every section after section 9 is full width */
    #page .page-section:nth-of-type(n + 9) {
      width: 100%;
    }
  }
}

How To Use It

1. Set up your sections as desired.

2. Copy and paste the code as indicated above.