How To Create A Split Page List Section in Squarespace 7.1

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

The banner list sections in Squarespace are a great way to feature dynamic content that changes, both images and text, when a user clicks through all the options.

Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider.

I recorded a new tutorial, where you'll learn how to access these new design options and what your settings are.

This tutorial will teach you how to turn that into a split page layout, featuring the 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 the main code from this tutorial:

@media only screen and (min-width: 640px){
[data section id goes here] .user-items-list-banner-slideshow .list-slideshow-image{
width:45%!important;
left:0!important
}

[data section id goes here] .user-items-list-banner-slideshow .slide-content {
margin-left: 40%!important;
width:35%!important
}

[data section id goes here] .slides{
padding-right:0!important
}
}

---