How to Add Vertical Lines to Your Squarespace Website

If you’re reading this blog post, you’re likely wanting to spice up your business’s Squarespace website!

Don’t get me wrong, I love Squarespace. It’s an excellent platform for small businesses—simple, easy to manage, and an all-in-one platform. But let’s face it—it can sometimes be a little too simple and feel limited in design flexibility. So this post will hopefully be the first of many teaching you how to implement simple code into your Squarespace website to help it go the extra mile.

Right now, we’re talking about a simple yet impactful custom feature: VERTICAL LINES.

Example: Vertical Lines in Action

Here’s an example of how I used vertical lines in a recent client’s footer design:

On desktop and tablet views, the vertical lines appear as shown above. When viewed on mobile, the lines turn into horizontal dividers to optimize the mobile layout (below).

How to Add Vertical Lines to Your Squarespace Site

In the website editor, and in whatever section you want to add the vertical line, click "Add Block". Then add an HTML block to the page and insert the following code:

<div class="vertical-line" style="background: #000000; height: 300px; width: 1px; margin: 0px auto;" ></div>

Voila! You’ve got your vertical line.

Customizing Your Vertical Line

Here’s how you can customize your new vertical line with a few modifications to the above code:

• Change the color by adjusting the hex code (#000000) to your desired color.
• Adjust the thickness by modifying the width value (e.g., width: 3px for a thicker line).
• Set the height by changing the height value (e.g., height: 500px for a taller line).

How to Convert the Vertical Line to a Horizontal Line in Mobile

You’ve added your vertical line, but on mobile, it may look better as a horizontal divider. To make that switch:

1. Go to Pages > Custom Code
2. Click Custom CSS
3. Insert the following code:

@media only screen and (max-width: 768px) {
  .vertical-line {
    background: #000000;
    width: 300px !important;
    height: 1px !important;
    margin: 0 auto;
  }
}

This is optional. If you want the vertical line to remain vertical on mobile, there’s no need to insert the above code. (You can adjust the color, thickness, and height for this mobile code the same way you did in your HTML block.)

Enhancing Your Squarespace Design with Simple Code

Congrats! By adding a simple vertical line with custom HTML and CSS, you were able to enhance the design of your Squarespace site and make it stand out. Need more customization for your website? Let’s chat!

Get in Touch

Do you have a Squarespace website that needs a little TLC to help you attract more clients? Could your website benefit from some custom code to make it unique to your business?

Click the link below to schedule a free consultation call with Marigold Web Studio. We’ll discuss your website and business goals and come up with a game plan to help you stand out online and attract your dream clients!