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

Log In Free Support

Popular Articles

Missing style.css

Updating errors

Installing GP Premium

Installing GeneratePress

This topic has 1 reply, 2 voices, and was last updated 3 years, 3 months ago by Fernando.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
January 9, 2023 at 12:11 am #2488482

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)

January 9, 2023 at 1:28 am #2488531
Fernando
Customer Support
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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.