Break Text Into Columns on Squarespace

Learn how to use CSS to add responsive columns to Squarespace text.

Original post:
https://www.ajmexperience.com/learn-posts/how-to-add-columns-squarespace

For more CSS code to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn

——————

HERE’S THE CODE:

Tip! Remember to change the block ID in the CSS below.
Here’s how to find the block ID and here’s how to target it.

// break text into columns //
#BLOCK-ID
p { column-count: 2; column-gap: 60px; }
Don’t want multiple columns on mobile? Use this instead:
@media only screen and (min-width: 767px) {
#BLOCK-ID
p { column-count: 2; column-gap: 60px; }}
You can add this inside the brackets in the above CSS if you want to justify the text:
text-align: justify;
Want to have a different number of columns for various breakpoints?

// mobile columns //
@media only screen and (max-width: 767px) {
#BLOCK-ID p { column-count: 1 }}

// tablet columns //
@media only screen and (min-width: 767px) and (max-width: 1024px) {
#BLOCK-ID p { column-count: 2 }}

// desktop columns //
@media only screen and (min-width: 1024px) {
#BLOCK-ID p { column-count: 3 }}

——————

AJM EXPERIENCE
A marketplace for graphic designers, Squarespace lovers, & CSS nerds. https://www.ajmexperience.com/
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm

——————

My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.

Скачать видео