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

Add Full Height Vertical Line within Section


Question

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:

 

1191521609_BlissMockup.thumb.png.678d2965b9d696506967691096c8c625.png

 

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:

 

1298495829_ScreenShot2021-06-03at12_56_57PM.thumb.png.551fe5a9c89768721b17636f299b9537.png

 

Any suggestions? Thanks in advance for your help! 

Link to comment

9 answers to this question

Recommended Posts

  • 0

The section has a default padding, you need to remove it first

Use this CSS

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

image.thumb.png.a716a3854fead4c1bc3119257fe3d792.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

@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!

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

image.thumb.png.4b1d7ac723f5d59fd8c4b106e5cde092.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...