Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel https://www.paypal.com/paypalme/insidethesquare
—
This tutorial is for all versions of Squarespace, from the latest 7.1 to older sites like Brine and Bedford theme templates.
—
In this tutorial, I am going to show you how a super simple line of code can turn any text block into a multiple-column text section. 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.
+ 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.
//–Two Columns
p {column-count:2; column-gap:5%;}
//– Three Columns
p {column-count:2; 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;}
**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:…
▸▸▸ Ready for more codes?
The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at https://InsideTheSquare.co/css
—
The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform.
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks
