[Support request] Horizontal Line between Grid Containers

[Frauke]

Hello there, ive searched in the Forum but didn´t found an anwser to my problem.

I want to achieve that effect:

In case the image is not loading. i have 4 columns in the grid, each with an icon (Circled Numbers) i want to “connect” those numbers with a dotted line from left to right.

But i realy have absolutely no idea how to achieve that in any way…could you maybe give me a hint?

[David]

Hi there,

do you have the grid setup that i could see ?

[Frauke]

I’m totally sorry, I was trying to work on the solution and totally forgot that I posted a question in the World’s Best Support Forum. Unfortunately, I have not yet managed to do as it should be…and clearly without example you can not help me either, sorry again for that.

The element that I would like to rebuild is on this page: https://hairskin.com/en/

in the section Procedure.

If you have any tips for me, I would be mega grateful to you

[Ying]

Hi Frauke,

You can create a structure like this:
https://www.screencast.com/t/oiuapTjZJS

Then set the 3 containers’ HTML anchor to bordered-container.

Select each headline block, set their margin top to -0.5em if the icon size is set to 1em.

Then add this CSS:

#bordered-container {
    border-top: 1px dashed blue;
}

[Frauke]

Thank you very much, i will give it a try that way

[Frauke]

I tried that and this i what i got:

https://freeimage.host/i/DgJAOB

But i want to achieve this:

https://freeimage.host/i/DgdBmN

Any ideas on that maybe? 😉

[David]

Hi there,

what you’re trying to do is super complicated.
Can i see your website and what you have so far ?

[Frauke]

Hey David,
i noticed that is super complicated 😀 the element is on a private state of the site. But its so much time consuming, that i will change that element to another one. So thanks for your help.

[David]

I hope you find something that works for you!

[Author]

Posts