[Support request] Sections in Columns

Home Forums Support [Support request] Sections in Columns

Home Forums Support Sections in Columns

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #628428
    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.

    GP Premium 1.6.2
    #628435
    David
    Staff
    Customer Support

    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?

    #628441
    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. ๐Ÿ™‚

    #628452
    David
    Staff
    Customer Support

    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%;
        }
    }
    #639919
    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,

    #639922
    David
    Staff
    Customer Support

    Hi there,

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

    #639923
    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?

    #639940
    David
    Staff
    Customer Support

    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.

    #639958
    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?

    #639962
    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?)

    #640212
    David
    Staff
    Customer Support

    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%

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.