- This topic has 5 replies, 3 voices, and was last updated 3 years, 4 months ago by Tom.
-
AuthorPosts
-
November 7, 2020 at 6:08 am #1521570FunkyCss
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
November 7, 2020 at 7:51 am #1521804DavidStaffCustomer SupportHi there,
out of curiosity – why not use the GenerateBlocks plugin ?
It has responsive grid settings built in.November 7, 2020 at 9:39 am #1521896FunkyCssIts 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.
November 7, 2020 at 11:50 am #1521977TomLead DeveloperLead DeveloperHi 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 π
November 7, 2020 at 12:31 pm #1521995FunkyCssHi 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! π
November 8, 2020 at 11:22 am #1522913TomLead DeveloperLead DeveloperGlad I could help π
-
AuthorPosts
- You must be logged in to reply to this topic.