Split Layout in Squarespace 7.1

What does this code do?

This code snippet will allow you to set a full bleed image on one side of the screen and content on the other.

Note: On mobile, the section will revert back to having the image in the background. I have added some more code at the bottom of this page to hide the image on mobile. If you want the image and content to stack on mobile instead, try placing two sections beside each other using this code snippet.

Note 2: You do not need code to create this layout in Fluid Engine in Squarespace 7.1.

Set Up the Section

Add a new blank section. Set your desired height and width for the content. I suggest having a width of large. Then add the image you want as the background image of the section. Add the content you would like as usual inside the section. At this point, your section may look something like the image below.

Code Snippets

Copy and paste this code into Design > Custom CSS

Image on the Left

/* Split Section */
@media only screen and (min-width: 1024px) {
#COLLECTIONID
   #page .page-section:nth-of-type(1) {
  background: #38383B; /* Background Colour Behind the Content*/
  .section-background{
    width:50%; 
    margin-right:50%;
  }
  .content-wrapper{
    width:50%  !important;
    margin-left:50% !important;
  }
}
}

Image on the Right

/* Split Section */
@media only screen and (min-width: 1024px) {
#COLLECTIONID
   #page .page-section:nth-of-type(1) {
  background: #38383B; /* Background Colour Behind the Content*/
  .section-background{
    width:50%;
    margin-left:50%;
  }
  .content-wrapper{
    width:50%  !important;
    margin-right:50% !important;
  }
}
}

Then set the collection id and section number as well as the background colour. If you do not wish the image and text to have a 50/50 split, then you can change the 50% to the size of your choice. Make sure that the width and margin in each section add up to 100% or your content may overlap your image.

For example, if I wanted the image to take up 30% of the screen and the content to take up the rest I would use the following code.

/* Split Section */
@media only screen and (min-width: 1024px) {
#COLLECTIONID
   #page .page-section:nth-of-type(1) {
  background: #38383B;
  .section-background{
    width:30%;
    margin-left:70%;
  }
  .content-wrapper{
    width:70%  !important;
    margin-right:30% !important;
  }
}
}

Design on Mobile

So far, the section will only split on screens above 1024px. Then it will revert back to how it looked before. If the image is too busy for the text to be displayed overtop, then copy and paste the following code in Design > Custom CSS below the above code. This will hide the image on screens below 1024 px.

Note: If you want the image and content to stack on mobile instead, try placing two sections beside each other using this code snippet.

@media only screen and (max-width: 1024px) {
#COLLECTIONID
   #page .page-section:nth-of-type(1) {
  background: #38383B; /* Background Colour Behind the Content */
  .section-background{
    display: none;
  }
}
}

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the background colour and the amount of space the image takes up.

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

4. Change the 1 to match the section you are trying to change.

5. Add in the Mobile Responsive Code to help the section be more mobile friendly.