Archived topic
Horizontal Line between Grid Containers
8 replies · Started by Frauke on August 30, 2022
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?
Hi there,
do you have the grid setup that i could see ?
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
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;
}Thank you very much, i will give it a try that way
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? ;)
Hi there,
what you're trying to do is super complicated.
Can i see your website and what you have so far ?
Hey David,
i noticed that is super complicated :D 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.
I hope you find something that works for you!
