[Support request] Grid Layout expand to right

[Paul]

Hi,

How can recreate the layout below where the 2/3rd container expands to the right filling the space?

https://demo.yootheme.com/wordpress/themes/union-dental/?page_id=6

Thanks,
Paul.

[David]

Hi there,

with a lot of head banging and hair pulling 🙂

Theres no one simple way to do it currently, in GB 1.7 it will become a lot easier, but it requires breaking outside of containment on one side only, which requires CSS calcs or absolute positioning.

If you want to try the following.

1. Add a Full Width Container Block.

2. Inside add a Grid Block with 3 columns, and give the grid an Advanced > Additional CSS Class of: has-calc-container

3. For the 3 grid columns:
3.1 Column 1 make its width 1% – and leave it empty.
3.2 Column 2 make its width 33% – and add your text content. You will want to set this to 100% on mobile / tablet.
3.3 Column 3 make its width 64%. – like wise make it 100% on mobile / tablet.
3.3.1 In column 3 add a GB Image Block and set its width to 100%
3.3.1.1 Note you will have to supply the right aspect ratio image.

4. Add this CSS to your site:

@media(min-width: 1024px) {
    .has-calc-container {
        --containment: 1200px; /* inner container width */
    }

    .has-calc-container>.gb-grid-column:nth-child(1) {
        width: calc((100vw - var(--containment)) / 2)
    }

    .has-calc-container>.gb-grid-column:nth-child(2) {
        width: calc(var(--containment) / 3); /* fraction of container */
    }

    .has-calc-container>.gb-grid-column:nth-child(3) {
        flex: 1;
    }
}

On this line:
--containment: 1200px; /* inner container width */
Set the 1200px to match that of your Customizer > Layout > Container -> Container Width

[Paul]

Hi David,

Really appreciate your help on this, I feel like I stretched the limits of support there. The method above works!

Thanks again,
Paul.

[David]

Awesome – glad to hear that!

[Author]

Posts