Jump to content

Creating vertical lines in between content blocks or columns

Recommended Posts

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! 

Screen Shot 2020-10-29 at 7.14.33 AM.png

Link to comment
  • Replies 16
  • Views 4k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

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!

Screen Shot 2020-11-13 at 8.13.25 AM.png

Screen Shot 2020-11-13 at 8.21.53 AM.png

Edited by Sera
Link to comment
  • 2 weeks later...

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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! 

Link to comment
  • 3 months later...
@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!

Link to comment
  • 6 months later...
  • 4 weeks later...
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!

Screenshot 2021-10-01 at 09.39.55.png

Can you share link to page in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.