Archived topic
FlexBox Css - 4 inline items in a row
5 replies · Started by FunkyCss on November 7, 2020
Hallo , i hope you are all safe.
I have made in the past this row with 4 images with simple css that on the mobile will be 2 items in a row.
The section i am talking about - https://ibb.co/Kzkgv6h
Now i want to change my website to flexbox and not floats as it is.
And i cant make the items work in the mobile in two colums.
The code i am using
<aside>
<div class="grid-style jerrybox">
<div class="custom-cta-inner grid-container">
<div class="grid-25 tablet-grid-50 mobile-grid-50 second-column">
<img src="image-path" alt="shop-icon">
<p class="icons-footer">Lorem Ipsum Lorem </p>
</div>
<div class="grid-25 tablet-grid-50 mobile-grid-50 second-column">
<img src="image-path " alt="shop-icon">
<p class="icons-footer">Lorem Ipsum Lorem </p>
</div>
<div class="grid-25 tablet-grid-50 mobile-grid-50 third-column">
<img src="image-path" alt="shop-icon">
<p class="icons-footer">Lorem Ipsum Lorem </p>
</div>
<div class="grid-25 tablet-grid-50 mobile-grid-50 first-column">
<img src="image-path" alt="shop-icon">
<p class="icons-footer">Lorem Ipsum Lorem </p>
</div>
</div>
</div>
</aside>
So i am using the Unsemantic Css and now i need to go with flex, any suggestion to make this as much cleaner and work with two collumns in the mobile ?
Thank you in advance.
Andreas
Hi there,
out of curiosity - why not use the GenerateBlocks plugin ?
It has responsive grid settings built in.
Its something i will use in the near future, but for now i have only two sections build with Html for all my website. And for now gutenberg for woo store is enough. i dont want to add extra plugin for 2 sections, but for sure i will use it when pro is out.
I am using GP in other projects and it works super nice and i feel it more and more confortable to use in each update it has.
Hi there,
You can do this:
<div class="my-grid-container">
<div class="grid-item grid-item-1">
...
</div>
<div class="grid-item grid-item-2">
...
</div>
<div class="grid-item grid-item-3">
...
</div>
<div class="grid-item grid-item-4">
...
</div>
</div>Then do this:
.my-grid-container {
display: flex;
}
.my-grid-container .grid-item {
width: 25%;
}
@media (max-width: 768px) {
.my-grid-container {
flex-wrap: wrap;
}
.my-grid-container .grid-item {
width: 50%;
}
}Hope this helps :)
Hi Tom! Thank you for your help i really apreciate.
That made it work perfect! Just now i jump to flex on my site!
Many thanks!
Waiting for the Generateblocks Pro Version! ;)
Glad I could help :)
