[Support request] Sections in Columns

[Naman Nepal]

Hi,

Is there a way I could put Sections in Columns? (With this I do not mean having columns inside a section, but having two sections side by side in columns).

Thanks.

[David]

Hi there,

we could use a flex box to wrap the site content and create columns, i used it on the Head On Site in the Site Library.

https://gpsites.co/head-on/

If you’re experimenting and have a spare dev site that would be a good site to test.

Alternatively i can give you some code? If you’re interested?

[Naman Nepal]

Love that. Just what I need.

I’m looking to have two sections side by side, instead of the three.

Would love to have some code.

PS: I might steal some ideas off of that website you linked to. I love some of what you’ve done there. 🙂

[David]

glad you like, it was designed to show off some GP functions and flex box 🙂

So for a real simple two column set-up you can use this – the media query limits it to desktop and tablet:

@media (min-width: 768px) {
    .generate-sections-enabled .site-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .generate-sections-container {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 50%;
        flex: 1 0 50%;
    }
}

[Naman Nepal]

Hi David,

I could not follow the code above and it did not seem to work. Can you let me know how you created the section 4/5/6 in the https://gpsites.co/head-on/ site?

Thanks,

[David]

Hi there,

i made an edit to the code above. Can you give it another try.

[Naman Nepal]

I wanted to know how I can add the class to gp sections (flex-section-33)? Can I add multiple classes as well?

[David]

OK we first add a flexbox to the site-main which contains our sections:

.site-main {
    display: flex;
    flex-flow: row wrap; /* allows new rows to be added */
}

We then set our default section width to 100% or they’ll size to their content:

.generate-sections-container {
    width: 100%;
}

Then we declare our Custom CSS classes for the variable sizes:

.section-flex-33 {
    flex: 1 0 33%;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .section-flex-33 {
        flex: 1 0 66%;
    }
}

So this means any section with the section-flex-33 class will occupy a minimum of 33% but will also automatically fill any available space. On the smaller screens it will occupy 66%.

If your first three sections have this class then you will get three columns.
But if you only added it to your first two sections they would automatically fill the space creating two 50% wide columns and your 3rd section would fill an entire row.

[Naman Nepal]

Thanks!

Also, how can I add multiple classes to the sections? Will a whitespace work? Or, should I separate those by a comma?

[Naman Nepal]

Thanks David! This worked!

What change in the CSS should I make if I need a two column layout with 30%/70% width? (And, how do I add multiple css classes to sections?)

[David]

White space between to classes.

You can create our own classes e.g:

.section-flex-70 {
flex: 1 0 70%;
}

The 1 = element can grow 0 = element can’t shrink and its basis is 70%

[Author]

Posts