How to Add a Vertical Line to Your Squarespace Website Using HTML & CSS

Adding lines and geometric shapes to your website can enhance its visual appeal. However, if you're using Squarespace, you may have noticed that the platform does not have a built-in option for adding vertical lines. Fear not, as this can easily be solved by incorporating a few lines of HTML and CSS. In this tutorial, I will guide you through the process of adding a vertical line to your Squarespace website using HTML and CSS.

Add HTML to Your Code Block

First add a code block to your desired page. Then enter the following HTML into that code block and save.

<div class="vertical-line"></div>

Now head over to design > custom CSS > then enter the following code and click save.

.vertical-line {
height: 50px;
width: 2px;
background: #a8a6a1;
margin-right: auto;
margin-left: auto;
}

Edit the line to your specifications

• To change the line height, edit the pixels (PX) highlighted in green.

• To change the line width, edit the the pixels (PX) highlighted in red.

• To change the line color, edit the HEX code highlighted in blue

Note: Sometimes, the line does not appear to scale on mobile, so head over to this post to learn how to hide the code blocks on mobile view.