How To Create A Split Page Layout in Squarespace

Apr 26

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

This tutorial will teach you how to use CSS to create a split page layout for a page section in Squarespace, showing the section background image on half of the screen, with the content on the other half.

I designed this code to reset on mobile, putting the content back over the image, to help you keep your site easy to use on small devices.

Be sure to check out the video to see how this code works and what parts you will want to change!

Here is a link to the free Chrome extension I used in the tutorial. I am not affiliated with the extension or it’s creators; just a fan!

This code places the image on the left:

@media only screen and (min-width: 640px){
[data section id] .section-background {
width: 50%
}
[data section id] .content-wrapper {
width: 50%;
margin-left: 50%!important;
}
}

This code places the image on the right:

@media only screen and (min-width: 640px){
[data section id] .section-background {
width: 50%;
margin-left: 50%!important;
}
[data section id] .content-wrapper {
width: 50%;
margin-left: 0%!important;
}
}

Want to create a split layout with a list section?

Check out this tutorial instead: How To Create A Split Page List Section in Squarespace