Add a Vertical Line

What does this code do?

This code snippet will allow you to add a vertical line on your Squarespace Website.

 
Vertical Line.jpg
 
 

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.

Rebecca Grace

Rebecca Grace is a Squarespace CSS Expert and Website Designer.

https://rebeccagracedesigns.com
Previous
Previous

Remove Spacing from Gallery Sections | Squarespace 7.1

Next
Next

Pricing Plan Table: Rounded Design