[Resolved] Any page hero flexbox examples?

[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>

[David]

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

[Jamal]

Absolutely marvelous, thanks David. 🙂

[David]

Happy to be of help

[Jamal]

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

[David]

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

[Jamal]

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

[David]

Awesome – glad to be of help.

[Author]

Posts