How To Create a Three Column Footer 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

In this tutorial, I will show you how to create a split footer layout in your Squarespace 7.1 site, creating two columns and 3 column options for your layouts.

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.

We are going to use what’s known as a flex box to stack these side by side, BUT we are also going to reset the layout on mobile so they will stack on top of each other because on a tiny screen, two and three columns can get pretty darn scrunched!

The codes you need are below, but make sure you watch the tutorial so you know how to use them!

Here are the codes:

Creating A 2 Section Split Footer

#footer-sections {display: flex;}

#footer-sections  .page-section:nth-child(1), #footer-sections  .page-section:nth-child(2) {flex: 1; display: flex; flex-flow: row nowrap; justify-content: center;} @media only screen and (max-width:950px){#footer-sections {display: inline;}}

Creating A 3 Section Split Footer

#footer-sections {display: flex;}

#footer-sections  .page-section:nth-child(1), #footer-sections  .page-section:nth-child(2), #footer-sections  .page-section:nth-child(3) {flex: 1; display: flex; flex-flow: row nowrap; justify-content: center;} @media only screen and (max-width:950px){#footer-sections {display: inline;}}

Adding a horizontal line between sections

#footer-sections {display: flex;}

#footer-sections .page-section:nth-child(1), #footer-sections .page-section:nth-child(2), #footer-sections .page-section:nth-child(3) {flex: 1; display: flex; flex-flow: row nowrap; justify-content: center;} #footer-sections .page-section:nth-child(2){border-left:5px solid #000; border-right: 5px solid #000} @media only screen and (max-width:950px){#footer-sections {display: inline;}}

---