squarespace-7.1 Add Full Height Vertical Line within Section

Site URL: https://www.leadwithbliss.squarespace.com

Hi!

I'm working on the following website:

www.leadwithbliss.squarespace.com

Password: leadwithbliss

I'm trying to add a full-height, vertical line within a section to achieve this look:

So far, I have added the following code: 

Code Block:

<div class="vl"></div>

CSS: 

.vl {
  border-right: 1px solid #000000; 
  height: 800px; 
  position: absolute;
  left: 110%;
}

However, I'm stuck and cannot get the line to go to the top of the section:

Any suggestions? Thanks in advance for your help! 

@tuanphan ohhhh wow it was that simple. got it! thank you so much.

I'm also experiencing the same problem. I know nothing about css. I got to this point on my page by following code by @tuanphanand developers on Youtube. 

Any help will be appreciated. even with the remove padding codes the line wont move up. 

Thank you.

also, this section is a split section. could that be causing the issue?

@chiskoprapunzel

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@tuanphan back with a follow-up question. do you have any idea why the vertical line in the 'my approach' section of the 'coaching' page does not appear in the same position as the 'conscious coaching' section on the home page? I suspect it's because the structure of the elements in the block is different than all of the other sections I have added the vertical line to so where I added the code in the block is different. However, I figured I'd ask in case you have any comments. Is the only way to make the position match to add custom code for this section?

The URL and pass have remained the same.

The code I have added for this is:

Code Block:

<div class="vl-right"></div>

CSS: 

.vl-right {
  border-right: 1px solid #000000; 
  height: 800px; 
  position: absolute;
  left: 110%;
}

[data-section-id="60d0e85e724ba127a9a08e7b"] .content-wrapper  {
    padding-top: 0 !important;
}

Thanks in advance!

On 8/24/2021 at 7:11 AM, stellaehabib said:

@tuanphan back with a follow-up question. do you have any idea why the vertical line in the 'my approach' section of the 'coaching' page does not appear in the same position as the 'conscious coaching' section on the home page? I suspect it's because the structure of the elements in the block is different than all of the other sections I have added the vertical line to so where I added the code in the block is different. However, I figured I'd ask in case you have any comments. Is the only way to make the position match to add custom code for this section?

The URL and pass have remained the same.

The code I have added for this is:

Code Block:

<div class="vl-right"></div>

CSS: 

.vl-right {
  border-right: 1px solid #000000; 
  height: 800px; 
  position: absolute;
  left: 110%;
}

[data-section-id="60d0e85e724ba127a9a08e7b"] .content-wrapper  {
    padding-top: 0 !important;
}

Thanks in advance!

Can you share link to page where you have problem?

@tuanphan yes, this occurs on the home (www.leadwithbliss.com) and coaching (www.leadwithbliss.com/coaching) pages (pass: leadwithbliss). You'll notice that the left/right vertical lines vary in position depending upon the section that they are in.  Thanks 🙂

On 8/27/2021 at 4:34 AM, stellaehabib said:

@tuanphan yes, this occurs on the home (www.leadwithbliss.com) and coaching (www.leadwithbliss.com/coaching) pages (pass: leadwithbliss). You'll notice that the left/right vertical lines vary in position depending upon the section that they are in.  Thanks 🙂

 

Hi,

Try adding a Line Block here (line width = text width)

next, add a Code Block under >> add vl code 

Next, remove Line Block & check again

@tuanphan my apologies for the delayed response. i tried this but, unfortunately it did not work. Please refer to the screenshot. I now have 3 columns in the design, rather than 2, so I'm not sure if that's influencing the result? 

Hi there! @tuanphan @stellaehabib

I am wanting to put a vertical line in the centre of one of my sections too. Like this: (this is just a mockup) and I stumbled across this code however the line isn't fixed on the section and moves when change the size of the screen. Can anyone help? and on mobile it doesn't work? 

On 8/8/2022 at 9:39 PM, JazLewis28 said:

Hi there! @tuanphan @stellaehabib

I am wanting to put a vertical line in the centre of one of my sections too. Like this: (this is just a mockup) and I stumbled across this code however the line isn't fixed on the section and moves when change the size of the screen. Can anyone help? and on mobile it doesn't work? 

Can you share link to your site? I think we can use code to add a left or right border

@tuanphan 

Thank you! The line attaches to the bottom section when the screen is at a normal size but when i expand to fit a bigger screen the line no longer attaches. 

This is the code i used:

.vl-centre {
  background: #000000; 
  width: 1px; 
  height: 760px;
  margin: 0 auto;
}

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

Of course, it's 

bamboo-fiddle-xxx4.squarespace.com
Password: JL19934439!

Thanks,
Jaz

On 8/17/2022 at 12:46 AM, JazLewis28 said:

@tuanphan 

Thank you! The line attaches to the bottom section when the screen is at a normal size but when i expand to fit a bigger screen the line no longer attaches. 

This is the code i used:

.vl-centre {
  background: #000000; 
  width: 1px; 
  height: 760px;
  margin: 0 auto;
}

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

Of course, it's 

bamboo-fiddle-xxx4.squarespace.com
Password: JL19934439!

Thanks,
Jaz

You mean it has this space?

@tuanphan 

Yeah it makes this space when you make the web browser bigger. It doesn't seem to render with different screen sizes 

On 8/18/2022 at 8:52 PM, JazLewis28 said:

@tuanphan 

Yeah it makes this space when you make the web browser bigger. It doesn't seem to render with different screen sizes 

The site is expired. You can access this link to extend trial

@tuanphanThanks for the link! I have extended my website now  🙂

On 8/22/2022 at 4:09 PM, JazLewis28 said:

@tuanphanThanks for the link! I have extended my website now  🙂

It looks like you will need to increase height value in some screen sizes (screen sizes where you have problem)

You can add some code like this

@media screen and (min-width:1350px) and (max-width:1700px) {
.vl-centre {
    height: 1000px;
}
}

this code will run from 1350 to 1700px screen

(Just an example, you can adjust these values)

Hi! I'm playing with a website for a client and I have a similar issue as the ones above. This is the url: https://geboortecentrum-baarn.squarespace.com/verloop-zwangerschap (everything is in Dutch) and the password: landkroon.

I am wondering if I can make the vertical line the top section responsive with the height of the section? I know it's too long now because of the code, of course I can make it smaller, but I want it to move with the section, I want it to be responsive whatever the size of the screen is. It doesn't need to be shown on mobile (already in the code). 

This is the code I used in the codeblock: 

<div class="vertical-line"></div>

and this I put in the Custom CSS: /

//vertical line///
@media screen and (min-width: 768px) {
  .vertical-line {
  background: #474747;
  width: 1px;
  height: 3670px;
  margin: 0 auto;
}
}

Hope you can help! Thanks so much 🙂

On 4/15/2024 at 4:42 PM, robienhali said:

Hi! I'm playing with a website for a client and I have a similar issue as the ones above. This is the url: https://geboortecentrum-baarn.squarespace.com/verloop-zwangerschap (everything is in Dutch) and the password: landkroon.

I am wondering if I can make the vertical line the top section responsive with the height of the section? I know it's too long now because of the code, of course I can make it smaller, but I want it to move with the section, I want it to be responsive whatever the size of the screen is. It doesn't need to be shown on mobile (already in the code). 

This is the code I used in the codeblock: 

<div class="vertical-line"></div>

and this I put in the Custom CSS: /

//vertical line///
@media screen and (min-width: 768px) {
  .vertical-line {
  background: #474747;
  width: 1px;
  height: 3670px;
  margin: 0 auto;
}
}

Hope you can help! Thanks so much 🙂

I checked some screen sizes and I see it is fine. Or you mean remove white space between lines?