[Support request] How to Add a Horizontal Line Between Two GB Containers / Grid Boxes / Headings?

[Chetan Patil]

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)

[Fernando]

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;
}

[Author]

Posts