Squarespace Split layout Design Tutorial

In this Squarespace tutorial, I show you another way to create a split layout design in Squarespace. With this method, you can place any Squarespace block to the left of the image which gives you more options than the previous tutorial.

Create a Split Layout Design in Squarespace

Custom CSS:

#new-split-layout {
  background: #e3e3e3;
  color: #000;

  .Index-page-content {
    margin: 0;
    width: 50%;
  }
  .Index-page-image {
    width: 50%;
    left: 50%;
  }

  @media screen and (max-width: 800px) {
    .Index-page-content {
      width: 100%;
    }
    .Index-page-image {
      width: 100%;
      position: relative;
      left: auto;
      height: 650px;
    }
  }
}

If you want the image on the left and the content on the right, use this code:

#new-split-layout {
  background: #e3e3e3;
  color: #000;

  .Index-page-image {   
    width: 50%;
  }
  .Index-page-content {
    margin: 0;
    width: 50%;
    left: 50%;
  }

  @media screen and (max-width: 800px) {
    .Index-page-content {
      width: 100%;
      left: auto;
    }
    .Index-page-image {
      width: 100%;
      position: relative;
      height: 650px;
    }
  }
}

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris