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

1. Copy and paste the code as indicated above.

2. Customize the height, width, and colour.