Add Text Beside a Gallery Section | Squarespace 7.1

What does this code do?

This code snippet will move two sections beside each other so that you can place text beside a gallery section in Squarespace 7.1.

Note: To see how to use this technique to add a sidebar to blog, product, and event pages click here.

Design Both Sections

Add a Blank Section in Squarespace. Use a text box to add the text you would like to be beside the gallery.

Then, add a Gallery Section and style as you would like.

To help your site be mobile friendly, the code snippet below will place the sections beside each other when on desktop. However, it will stack them again on mobile.

Code Snippets

Copy and paste this code into Design > Custom CSS

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

Then change the 2, 3, and 4 to match the sections your text and gallery are in.

If your text and gallery are in the 1st and 2nd section, you may need to adding some padding to the top so that it does not get hidden behind the header. For example:

/* Text Beside a Gallery */
@media only screen and (min-width: 641px) {
  #collection-605e296f862f39317b95c728 {
    #page .page-section:nth-of-type(1) { /*section 2 on the left */
      width: 50%;
      min-height: 80vh;
      align-items: center;
      float: left;
      padding-top: 150px !important; /*push it beneath the header */
    }
    #page .page-section:nth-of-type(2) { /*section 3 on the right */
      width: 50%;
      min-height: 80vh;
      align-items: center;
      padding-top: 150px !important; /*push it beneath the header */
    }
    #page .page-section:nth-of-type(3) {     /* section 4 is full width again */
      clear: both;
    }
  }
}

BONUS TIP: If you want your sections to be the same height, change the “min-height: 80vh;” to be “height: 80vh;”, then play with the number 80.

How To Use It

1. Copy and paste the code as indicated above.

2. To learn how to find a collection id check out our Start Here guide.

3. Change the 2, 3 and 4 to match the sections you are trying to move.

4. Edit the width of the sections. Make sure your widths add up to be 100%.