How to Add a Chic Vertical Line in Squarespace (Easy Coding)
Sometimes, your Squarespace website needs a little extra something to make it stand out! A subtle touch to guide the eye and add visual interest. That's where the vertical line comes in. Think of it as a stylish way to organize your content and give your site a polished touch.
Check out a chronological timeline example we’ve made using a vertical line:
A chronological timeline made with a vertical line in Squarespace
The good news is you can add a vertical line to Squarespace with a few lines of code.
Let’s jump in.
How to Add A Vertical Line in Squarespace
3 steps on how to add a vertical line in Squarespace
Step 1: Add a code block where you want the vertical line to appear.
Open the Editor mode and use the "+" button to add a "Code" block. Inside the code block, paste:
<div class="vertical-line"></div>
Nothing will show up yet because we haven’t defined the style of the vertical line, which is the next step.
Step 2: Add styling on Custom CSS
Navigate to Website Tools > Custom CSS. You'll see a designated area to paste your code snippet.
Paste the code below and customize it to fit your website:
.vertical-line {
height: 300px; /* Adjust height as needed */
width: 1px; /* Adjust thickness as needed */
background-color: black; /* Change color as desired */
border-style: none; /* Can change to "solid", "dotted" or “dashed” */
margin-left: auto;
margin-right: auto;
}
Step 3: Adjust for mobile display
Tall lines might be overwhelming on small screens. To fix this, we can tweak the codes to either reduce the line’s height or hide the line on mobile devices.
Add this code snippet to reduce the line’s height on mobile:
/* Media Query for Smaller Screens */
@media only screen and (max-width: 768px) {
.vertical-line {
height: 100px; /* Reduce height on mobile */
}
}
Alternatively, here’s how to hide the line on mobile:
/* Media Query for Smaller Screens */
@media only screen and (max-width: 768px) {
.vertical-line {
display: none; /* Hide on mobile */
}
}
Adding Multiple Vertical Lines
For vertical lines with the same style, you can repeat step 1 to add more of them.
To create a second vertical line different from the first one, you can add a new class of vertical lines. Repeat step 1 but with the code below:
<div class="vertical-line-2"></div>
On step 2 and step 3, make sure you use the new class. For example:
.vertical-line-2 {
height: 500px; /* Adjust height as needed */
width: 4px; /* Adjust thickness as needed */
background-color: #0000FF; /* Change color as desired */
border-style: solid; /* Can change to "none", "dotted" or “dashed” */
margin-left: auto;
margin-right: auto;
}
The Non-Coding Method
If you want to avoid coding, you can upload an image of a vertical line and add it to where needed on your Squarespace page. Keep in mind though that using images increases the website loading time more than CSS.
Conclusion
Adding a vertical line is an easy way to give your website design a modern and polished look. Try it out and let us know if you have any questions in the comments!
