How to insert vertical line without it affecting other elements

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 🙂

Hi. Your site is private. Can you setup an access password? We can access easier

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: 
https://www.luminescentdreams.com/tutorials/the-easiest-way-to-create-vertical-lines-in-squarespace-with-no-code 

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
alyssa@luminescentdreams.com