Adding small custom touches to your site can make a world of difference, and a vertical line is one of those subtle details that can bring balance and elegance to your design. Whether you’re looking to divide sections, highlight specific content, or just add a unique element to your Squarespace website, a vertical line can do the trick. Here’s how to add one without breaking a sweat. (And if you’re looking for a web designer in Utah, feel free to reach out—I’m here to help!)
Think about the purpose of your line. Is it dividing text? Framing an image?
Giving the layout a more structured look? Planning out where the line will go can make the styling process easier.
To add a vertical line in Squarespace, you’ll use a bit of CSS. Don’t worry—it’s easier than it sounds!
First, go to the section where you want the line and add a Code Block.
Here’s how:
Now, let’s add the code that will create your vertical line.
A div is simply a box that holds parts of your webpage, like text or images, and helps organize everything neatly. A class is just a label you give that box so you can style it easily. You can name the class anything you like, but here we’re calling it custom-vertical-line to make it clear that it’s for our vertical line style. This way, whenever we want to style that line, we just refer to this class name.
Copy and paste this into the Code Block:
<div class="custom-vertical-line"></div>
Then, go to Design > Custom CSS in your site settings. Add this CSS code:
.custom-vertical-line {
width: 2px;
height: 100px;
background-color: #333;
margin: 0 auto;
}
You can adjust the height, thickness, and color to suit your design. Play around with these values until you’re happy with the look!
You can also adjust the position of your vertical line by tweaking the margin settings in the CSS. This will let you control how much space is around it.
For example, this code adds top/bottom spacing:
margin: 20px auto;
After you’ve added and styled the line, take a look at it on both desktop and mobile views. Sometimes vertical lines can look different on various devices, so it’s always good to make adjustments as needed. To adjust or hide your vertical line on mobile, you can use a media query. Media queries allow you to set different styles based on the screen size.
For example, let’s say you want the line to be shorter or hidden on smaller screens. You’d add this code to your CSS:
@media (max-width: 768px) {
.custom-vertical-line {
height: 50px; /* Adjust height for mobile */
display: none; /* Or hide the line altogether */
}
}
In this example, when the screen width is 768 pixels or less (like on a mobile device), the height of the line changes to 50 pixels—or it hides entirely if you use display: none. This helps keep your design clean and responsive on different devices.
If you’re using Wix, placing custom code like this is a bit different but still straightforward.
Here’s how to add your custom vertical line code:
<style> tag, as this section accepts both HTML and CSS. Here’s what it should look like:<style>
.custom-vertical-line {
width: 2px;
height: 100px;
background-color: #333;
margin: 0 auto;
}
</style>
With this setup, your custom vertical line should appear on your Wix site, styled just the way you want it!
That wasn't that bad, right? Remember, if you’re ever feeling stuck or need help fine-tuning your design, don’t hesitate to reach out. As your personal web designer in Utah, I’m here to make the process smoother for you!
Happy designing, and here’s to small touches that make a big difference!