Vertical lines

[maarschalk]

Hello,

I want to insert vertical lines in my website to seperate projects. Something like this: https://www.cupofcouple.com/. Is it possible? For example by using HTML + CSS? I've been plaing around for some time, but can't find the perfect solution.

Thanks!
B.

[mariusjopen]

Dear @maarschalk

you can play around with this one:

.col {
    border-left: 1px solid black;
    padding-left: 20px;
}

Or add a custom HTML element into the Gridder and give that a border.

Best!

Marius

[maarschalk]

Thanks for the fast answer, Marius. I think I'm going for option 2, since it seems more easy to me and takes less knowledge of coding. Could you please give an example of the HTML element? Right now I'm using the one below. However I want to be able to adjust the height of the vertical line to the row-height (element-height) in the gridder. Is this possible?

HTML:

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

CSS:

.vertical-line {
position:absolute;
left:50%;
Height: 100vw;
border-left: 0.05vw solid #808080;
}

[mariusjopen]

Dear @maarschalk
looking at your coce I recommend you to go for option number 1.
That will be easier.

I just tried to use the second option and it turned out it is not really working well.

Best!

Marius

[maarschalk]

@mariusjopen said in Vertical lines:

.col {
border-left: 1px solid black;
padding-left: 20px;
}

Hi Marius,

Okay thanks :-) However I have one more question: when I add the code like this, a border appears at the left side of every project thumbnail, as intended of course. Still, I need the one on the outside left to disappear (see photo below)

And one more thing: it seems like the borders are pushing the other content to one side. Could this be fixed as well?

thanks a lot for your help :-)

Best,
Bart

[mariusjopen]

Dear @maarschalk

ah. This is a classic situation :-)

Can you send me a link?

Best!

Marius

[wardh]

I'm having a similar problem. What was the solution?

[Richard]

Dear @wardh

Likely the solution was just to specify the exact col to target with CSS so instead of all col (columns) targeted just the center. Or something like all first children of the parent row are not targeted (therefore all left-side elements are not targeted ) 🌝

---

Best wishes and a happy 2022

Richard