[Resolved] How to create uneven columns?

[Michael]

Hi!
I am working with Sections, trying to create the following layout: https://www.dropbox.com/s/eybf9p0mftsrw3y/Screenshot%202019-04-16%2012.18.42.png?dl=0

Which is basically three columns, but the first one should only have one row. And the second and third column should have two rows.

But I can’t get it to look like that. What am I missing?

GP Premium 1.8

[David]

Hi there,

you would need to nest a grid inside another grid to do that.
You parent grid would be 2 columns with a 33% / 66% split.
The first column (33%) would contain just the single Image.
The second column (66%) would contain the second grid of the 4 icons and text. Each of these nested columns would need to be 50% width.

[Michael]

Ok,
I am trying to do this, but it does not come out right:
[lgc_column grid=”33″ tablet_grid=”33″ mobile_grid=”100″ last=”false”]
[/lgc_column]
[lgc_column grid=”65″ tablet_grid=”65″ mobile_grid=”100″ last=”true”]
[lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”false”][/lgc_column]
[lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”true”][/lgc_column]
[lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”false”][/lgc_column]
[lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”true”][/lgc_column]
[/lgc_column]

[David]

I am not seeing that markup.
But instead we could do something else.

In the section – create this:

<div class="db-column col-33">
<!-- Add your Image in here -->
</div>
<div class="db-column col-66">
<!-- Add your LGC Columns in here set to 50% widths for desktop -->
</div>

In the settings tab give the Section a CSS Class of db-flex-columns

Once you have done this let me know and ill provide some CSS to make the layout you need.

[Michael]

Hi David,
I think I have done what you suggested now… 🙂 Can you verify?

Thank you for your patience with me 🙂

[David]

So final pieces of the puzzle.
The content that comes after the columns ie. the button and the text, wrap that in its own Div like this:

<div class="db-column">
<!-- button and title in here -->
</div>

then add this CSS:

@media (min-width: 768px) {
    .db-flex-columns .generate-sections-inside-container {
        display: flex;
        flex-wrap: wrap;
    }
    .db-column {
        flex: 1 0 100%;
    }
    .db-column.col-33 {
        flex: 1 0 33%;
    }
    .db-column.col-66 {
        flex: 1 0 33%;
    }  
}

[Michael]

That seems to have done the trick! Thank you 🙂

May I ask another question?
I use the <hr /> tag to create a line. How would you suggest I go about to make the line look like this instead: https://www.dropbox.com/s/tpcwjfyt94dva91/Screenshot%202019-04-16%2018.00.48.png?dl=0

And how can I control the “padding” above and below the hr tag? Right now it seems quite big…

[David]

You can try this CSS:

hr {
    background-color: transparent;
    border-bottom: 1px dashed #000000;
    margin-top: 10px;
    margin-bottom: 10px;
}

There isn’t any control over how a dashed border displays aside from its thickness and color.
You can tweak the margins to suit. To note some of the space will be coming from the elements before or after the <hr>

[Michael]

Thank you David!

[David]

Glad to be of help

[Author]

Posts