I am trying to build a vertical line that goes across all sections on the landing page. It starts halfway on the hero section and end just above the footer.
What I have tried is a div with a 1px border on the right edge with Position Absolute and percentages for the beginning and end. It works fine for a fixed width but as soon as the length of the page changes (i.e. tablet or mobile) the line gets super long and breaks the page.
I’d really appreciate any help or advice you can provide.
Thank you in advance!
to gain this behavior, wrap your full website contents with a div called page-wrapper and give this div a relative position, width 100%, height 100%. Take a child of this div which is the vertical line. give the children div to absolute position, top 50vh(to start halfway of hero section), left 100px(you can modify this to change the position of the line horizontally) 1px width, and 96% height(to gain the start from the middle of the hero section, you can modify this), and your green color as the background color of the children div. Hope, you understand. Feel free to ask if you have any confusion.