[Resolved] Any page hero flexbox examples?

Home Forums Support Any page hero flexbox examples?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1078101
    Jamal

    Hi

    As advised before i’m trying to move away from unsemantic grid and learn flexbox but i’m stuck to be honest. I would appreciate if you can help with the css to achieve columns of different width ex 30% 70% with padding in between and so on. An example like this page hero where we assume the tree is in its own column and the text in another column.

    Before i simply used to do like below and it was all done 🙂

    <div class="grid-parent flexbox-container">
    <div class="grid-45"> 
    <h1>The perfect theme</h1><span class="loud-span"> for your next project </span>
    <p> We take speed, security & usability seriously. Thanks to our tiny footprint and clean code, we make sure you start off as fast as possible.</p> 
    <a class="button" href="#">Explore our modules</a>
    </div>
    <div class="grid-50 prefix-5">
    <img src="#" />
    </div>
    </div>

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #1078139
    David
    Staff
    Customer Support

    Hi there,

    simple 2 item HTML:

    <div class="flex-grid-container">
        <div class="grid-item flex-60">
            First item
        </div>
        <div class="grid-item flex-40">
            Second Item
        </div>
    </div>

    Then this CSS which will stack on mobile:

    /* General and Mobile styling */
    
    .grid-item {
        padding: 30px;
        box-sizing: border-box;
    }
    
    /* Desktop styling */
    
    @media (min-width: 769px) {
        .flex-grid-container {
            display: flex;
        }
        .grid-item {
            padding: 40px;
        }
        .grid-item.flex-40 {
            flex: 1 0 40%;
        }
        .grid-item.flex-60 {
            flex: 1 0 60%;
        }
    }

    If you want there to be gutters/margins between items it easiest to add a grid-item-inner to your HTML eg.

    <div class="flex-grid-container">
        <div class="grid-item flex-40">
            <div class="grid-item-inner">
                First item
            </div>
        </div>
        <div class="grid-item flex-60">
            <div class="grid-item-inner">
                Second Item
            </div>
        </div>
    </div>

    The original CSS will still apply and the padding on the grid-item will acts as your gutters. Then style the background of the grid-item-inner

    #1078671
    Jamal

    Absolutely marvelous, thanks David. 🙂

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #1078758
    David
    Staff
    Customer Support
    #1082040
    Jamal

    Sorry to bother again but how can i reverse order of things or mobile? Can’t get my head around it unfortunately 🙁

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #1082129
    David
    Staff
    Customer Support

    Personally I would write my HTML in mobile order, then reverse the flex direction on desktop so add the additional property i commented to this CSS:

    @media (min-width: 769px) {
        .flex-grid-container {
            display: flex;
            flex-direction: row-reverse; /* This rule */
        }
        .grid-item {
            padding: 40px;
        }
        .grid-item.flex-40 {
            flex: 1 0 40%;
        }
        .grid-item.flex-60 {
            flex: 1 0 60%;
        }
    }

    More than happy to help if you want the alternative method where we use the flex on mobile and desktop …. let us know

    #1082431
    Jamal

    This is great, thank you very much ! I will now remember mobile first always 😉

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #1082747
    David
    Staff
    Customer Support

    Awesome – glad to be of help.

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