In this tutorial we are going to separate a few blocks of text with a small border. On the desktop version of the site, these blocks of text will be separated with vertical lines. On the mobile version, we’ll switch that up to horizontal lines.

A few things to note before you use the codes below:

✨ This is a link to the free Chrome extension I use in the video for grabbing the block ID’s. InsideTheSquare is not affiliated with this extension or it’s creators, just a fan!

👩🏼‍💻 I created this using my Squarespace 7.1 demo site but this technique will work in version 7 too.

🤷‍♀️ CSS is SUPER customizable; this is just one approach to creating this look!

🔲 Borders are also SUPER customizable! Learn about all your options here: insidethesquare.co/borders

Below are the codes from the tutorial.

Here are the codes:

Make sure you update the block ID’s in order, and change up the border style to suit the look you want for your own Squarespace site!

This code creates the vertical line and the second one creates the horizontal line:

@media only screen and (min-width:641px){
#block-2, #block-3 {border-left: 1px solid #FFF} 
#block-3 {border-right: 1px solid #FFF}
}

@media only screen and (max-width:640px){
#block-2, #block-3 {border-top: 1px solid #FFF} 
#block-3 {border-bottom: 1px solid #FFF}
}