How to create two columns of text in Squarespace
This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes
In this tutorial, I am going to show you how to create multiple columns of text in any version of Squarespace!
A few key things to note:
→ This works in any version of Squarespace and any theme
→ You need to know the NAME of the text style you are working with! In 7.0 your normal text goes by the code name “p” In 7.1, small, medium, and large paragraph text all have different names.
→ You can install this site wide or on an individual page OR on an individual post
→ You can add a line break in the text block with shift+enter (pc) or Ctrl+enter (mac) but a solid line break of “enter” will break the text block into two sections. We don’t want that!! So pay close attention to how you upload your text and utilize line breaks.
→ And last but not least, no, we can not insert a new text type in the middle of the multi column paragraph. That will also break it into two sections causing the same problem a line break does.
Phew - that was a lot, right? Anywho, check out the video to see the step-by-step magic and when you are ready, grab the code below to make it work on your own site, being super careful to use the right code name for your specific type of text.
Here are the codes:
Two Columns
p {column-count: 2; column-gap:5%;}
Three Columns
p {column-count: 3; column-gap:5%;}
Two Columns with Justified Alignment
p {column-count:2; column-gap:5%; text-align:justify!important;}
Three Columns with Justified Alignment
p {column-count:3; column-gap:5%; text-align:justify!important;}
The codes for blog posts only:
Version 7.1 Blog Posts
.blog-item-content p{column-count:....
Brine Template Blog Posts
.BlogItem p{column-count:....
Bedford Template Blog Posts
.entry-content p{column-count:....
Pacific Templates
.entry-content p {column-count:...
York Templates
.BlogItem p {column-count:...
Five Template Blog Posts
.entry-content p {column-count:...
