Add a Vertical Line
What does this code do?
This code snippet will allow you to add a vertical line on your Squarespace Website.
Code Snippets
Copy and paste this code into a code block on your website.
<div class="vertical-line"></div>
Copy and paste this code into Design > Custom CSS
/* Vertical Line */ .vertical-line { height: 50px; width: 2px; background: #a8a6a1; /*line colour*/ margin-right: auto; margin-left: auto; }
Then customize the height, width, and colour of the line.
Bonus
If you would like the line to overlap something above it then use the following code instead.
/* Vertical Line */ .vertical-line { position: relative; height: 50px; width: 2px; background: #a8a6a1; /*line colour*/ margin-right: auto; margin-left: auto; bottom: 10px; /*change this number to move the line up */ z-index:3; /*make this number higher if the line is still behind the object*/ }
If you would like the line to overlap something below it then use the following code instead.
/* Vertical Line */ .vertical-line { position: relative; height: 50px; width: 2px; background: #a8a6a1; /*line colour*/ margin-right: auto; margin-left: auto; top: 10px; /*change this number to move the line down */ z-index:3; /*make this number higher if the line is still behind the object*/ }
If you would like to hide the line on mobile then copy and paste the following code into Design > Custom CSS
/*Vertical Line on Mobile */ @media only screen and (max-width: 640px) { .vertical-line { display: none; } }
How To Use It
Copy and paste the code as indicated above.
Customize the height, width, and colour.