Archived topic
How to Add a Horizontal Line Between Two GB Containers / Grid Boxes / Headings?
1 reply · Started by Chetan Patil on January 9, 2023
Hi,
I am trying to create layout similar to this https://prnt.sc/2CSsRvf-QaiP or this https://programmersportal.com/css/how-to/add-horizontal-line-between-two-divs.php but not working.
Will you please let me know how we can do this using Generateblocks?
I want a responsive line between these 2 headings. (https://prnt.sc/kD0N0M6f9hH6)
Link to frontend --> https://obomopaw.myhostpoint.ch/fahrschule-luzern/ (section is just above the footer)
Hi Chetan,
It's possible but you'd need a structure like this: https://share.getcloudapp.com/kpuOJWb6
Add cu-container to the class list of the parent Container Block as shown in the screenshot above.
Then, add this through Appearance > Customize > Additional CSS:
.gb-container.cu-container > .gb-inside-container {
display:flex
}
.gb-container.cu-container > .gb-inside-container > .gb-container {
flex-grow: 1;
position:relative;
}
.gb-container.cu-container > .gb-inside-container > .gb-container:after {
content: "";
width: 100%;
height: 3px;
position: absolute;
left: 0;
top: 50%;
transform:translateY(-50%);
background-color: #000;
z-index: 100;
}