Archived topic
Any page hero flexbox examples?
7 replies · Started by Jamal on November 26, 2019
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>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
Absolutely marvelous, thanks David. :)
Happy to be of help
Sorry to bother again but how can i reverse order of things or mobile? Can't get my head around it unfortunately :(
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
This is great, thank you very much ! I will now remember mobile first always ;)
Awesome - glad to be of help.
