Squarespace is amazing but they don’t always cover every design need. Luckily CSS is here to help! This tutorial will show you how incredibly simple it is to create a split-page layout in Squarespace with just a little extra code.
—
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
—
This tutorial is an updated version of an older one, but is specific for Squarespace 7.1 and won’t work for older versions.
—
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 the code from this tutorial; be sure to add your own data section ID – here is the chrome extension I use (not affiliated with this extension or its creator!) https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
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;
}
}
– – –
🔗 RELATED VIDEOS 🔗
How To Create A Split Page List Section in Squarespace:
– – –
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 – You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
– – –
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
—
The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
