Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Creating vertical lines in between content blocks or columns


Sera

Question

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 post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

7 answers to this question

Recommended Posts

  • 0

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 post
  • 0

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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 post

Create an account or sign in to comment

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


×
×
  • Create New...