Vertical line not touching the top of the header and at the bottom

www.bettytang.ca 

I am trying to create a grid aesthetic similar to the first section on this website: https://www.studiobicyclette.com/ 

This is for the first part of my page with the sticky split section. I have the vertical line but it is not touching the top header and the bottom part.

Here's my code including the sticky split: 

#block-yui_3_17_2_1_1689133381343_1530 {
  border-right: 1px solid #000;
}
#block-yui_3_17_2_1_1689221722923_8205 { 
  border-right: 1px solid #000;
}
@media(min-width:767px) {
  .col.wm-sticky-column {
    position:sticky;
    top: 150px;
  }
}

Thanks!!

Border show fine to me

Sorry, I meant that is what I am trying to achieve.

Here is my website: https://www.bettytang.ca/ . The vertical line is not touching the top and end. 

Thanks! @tuanphan

On 7/31/2023 at 11:39 AM, b_tee said:

Sorry, I meant that is what I am trying to achieve.

Here is my website: https://www.bettytang.ca/ . The vertical line is not touching the top and end. 

Thanks! @tuanphan

You can add this to Design > Custom CSS

/* Fix vertical line */
body.homepage article>section:first-child {
    padding-top: 0px !important;
}
div#block-yui_3_17_2_1_1690479254151_7976 {
    padding-top: 50px;
}

@tuanphan thank you, its touching the top but not at the bottom. please see site: https://www.bettytang.ca/ 
also, is there a way to make it stick so it doesnt bounce when its scrolling down?

You can use this new code to add vertical line

@media screen and (min-width:992px) {
body.homepage article>section:first-child:after {
    content: "";
    width: 0.5px;
    position: absolute;
    height: 100%;
    background-color: black;
    top: 0;
    bottom: 0;
    left: 40%;
}
}

Hi @b_tee (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 then hide it behind an image or shape on mobile view (so that it doesn't show up). 

This method won't create a sticky split section, but you'll be able to extend the vertical line all the way to the top and bottom margins of the section.

✨ 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