Creating vertical lines in between content blocks or columns

Site URL: https://tangerine-iguana-kwg3.squarespace.com/

Hello there, I'm attempting to add vertical lines to certain sections within my site, however it's proving difficult to do so. Anyone can help with custom coding on this one? I found some codes online, however the height of the vertical line doesn't follow the height of the block/ column upon scaling to different screen sizes. Ideally it would meet the horizontal lines above / below it or at the least have a consistent spacing in between them.

Would love to see if there is a solution to this. 

Site URL:

https://tangerine-iguana-kwg3.squarespace.com/

Password: MaintainS134!

The section I'm hoping to address is in the About section. 

Thanks! 

Hi. I don't see about us section. Can you share link to exact page?

Hi @tuanphan - apologies! I somehow missed your response. 

Of course, here is the page I'm looking to solve for
https://tangerine-iguana-kwg3.squarespace.com/about

Additionally, I'm looking to do the same for the Classes section:
https://tangerine-iguana-kwg3.squarespace.com/classes

Which includes more blocks as well as a 3 column grid within the price section. If you could help in understanding how to potentially solve for this, that would be so helpful, I've been searching all over for how to code vertical lines between blocks 🙂

Thanks Tuanphan!

Hi. Do you still need help on this?

Hi @tuanphan Yes, that would be amazing, thanks a lot! 

Hi @tuanphan not sure if this makes a difference in the URL but since the site is currently live, the pages with the vertical lines that I need help with are the following:

https://www.in-form-studio.com/classes

https://www.in-form-studio.com/about

No password is required.

Thanks a lot, appreciate all the help.

Try this CSS

div#page-section-5f9c1abcb36a36116a4ff00e .span-6 {
    border-right: 1px solid black;
    margin-left: -1px;
}
div#page-section-5f9c1b862aa87e59d5bda52c .span-6 {
    border-right: 1px solid black;
    margin-left: -1px;
}
div#page-section-5f9c1b91e13a387cf76857b7 .span-6 {
    border-right: 1px solid black;
    margin-left: -1px;
}

Thank you @tuanphan ! This worked. One small area that isn't too significant I wanted to ask you about,  the stroke is also applied to the right edge of the site margin, is there a way to only apply to the center? 

Additionally, I was also hoping to apply this to the same treatment for the About page, previously I found a code for including a rule in the center, however it doesn't follow the height of the block, and I'll remove the code I'm currently using since the one you have included works in following the height of the content. 

https://www.in-form-studio.com/about

Thanks again for all of your help on this! I looked all over to find this seemingly simple solution, appreciate it! 

@Sera i was having the same issue and fixed it with last-child / first child tags. i think for you it would be:

div#page-section-5f9c1abcb36a36116a4ff00e .span-6:first-child  {
    border-right: 1px solid black;
    margin-left: -1px;
}
div#page-section-5f9c1b862aa87e59d5bda52c .span-6:last-child  {
    border-right: 1px solid black;
    margin-left: -1px;
}
div#page-section-5f9c1b91e13a387cf76857b7 .span-6:first-child  {
    border-right: 1px solid black;
    margin-left: -1px;
}

if that doesn't work, i'd try the opposite! (last-child, first-child, last-child) but i think the code above is correct.

great looking site!

Hello Sera I am looking to do this also, did you like the solution above? Any tips besides that to think of when you do theese lines?

HI @tuanphan, I'm sorry because I'm late with this topic 🙂
I want to place a vertical line between two column of text in my blog post page...but I don't understand where I have to paste the code. 
I'm sorry, I'm a noob! 🙂

THANKS!

On 10/1/2021 at 2:41 PM, MCarda said:

HI @tuanphan, I'm sorry because I'm late with this topic 🙂
I want to place a vertical line between two column of text in my blog post page...but I don't understand where I have to paste the code. 
I'm sorry, I'm a noob! 🙂

THANKS!

Can you share link to page in screenshot?

@tuanphan I was hoping you could help me with a similar topic. I've added a vertical line which is fine but on mobile its still showing in the middle of the page and the line is going through the text, is there a way to stop it from showing on mobile?

The website is https://www.fortro.co/services 

On 11/17/2021 at 6:00 AM, SpaceSquare said:

@tuanphan I was hoping you could help me with a similar topic. I've added a vertical line which is fine but on mobile its still showing in the middle of the page and the line is going through the text, is there a way to stop it from showing on mobile?

The website is https://www.fortro.co/services 

I see you solved with this code

@media screen and (max-width: 640px) {
    .vl {
        display:none
    }
}

@tuanphan how do you get the div#page-section to apply the vertical line to?

On 2/4/2022 at 2:01 PM, Leanie said:

@tuanphan how do you get the div#page-section to apply the vertical line to?

You can use [data-section-id="..."]

Use this tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

( I usually div#page.. because find it take less time than data section id)

For those that are still struggling with this,

I found a very easy tutorial