Jump to content

How to insert vertical line without it affecting other elements

Recommended Posts

Site URL: https://marlin-gopher-jtch.squarespace.com/contact

Hi SS community,

I have two questions regarding a vertical line that I hope you can help with:

1. What is the code to run a vertical line down the full height of a section? 100% does not work. 

2. When I increase the line height, it shifts the text elements down with it. How can I set up this vertical line so that it does not affect the other elements? 

This is the code currently in place:

.vertical-line {
  position: relative;
  background: #000000;
  height: 300px;
  width: 1px;
  margin: 0-auto;


Much appreciated 🙂

Screenshot 2022-08-19 at 17.00.00.png

Link to comment
  • Replies 2
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...

Hi @VanessaDesign_2022 (and anyone else who stumbles upon this forum post), I have a slightly different solution to this problem that doesn't involve code (as long as your Squarespace site is on 7.1 Fluid Engine)! 

Instead of adding vertical lines with code, I like to upload a graphic of a vertical line (that I created in Canva) on desktop view and stretch it to the full height of the section. You can also hide the vertical line behind an image or shape on mobile view (so that it doesn't show up). 

 Here's a tutorial video explaining exactly how to do it: 

Thanks so much & let me know if this helped! 

Alyssa Parr 
Squarespace Expert & CEO of Luminescent Dreams | Tutorials | Templates | Portfolio
👩‍💻 Hire me to build or edit your website: VIP Days | Custom Web Design

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.