[Resolved] FlexBox Css – 4 inline items in a row

Home Forums Support [Resolved] FlexBox Css – 4 inline items in a row

Home Forums Support FlexBox Css – 4 inline items in a row

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1521570
    FunkyCss

    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

    #1521804
    David
    Staff
    Customer Support

    Hi there,

    out of curiosity – why not use the GenerateBlocks plugin ?
    It has responsive grid settings built in.

    #1521896
    FunkyCss

    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.

    #1521977
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1521995
    FunkyCss

    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! πŸ˜‰

    #1522913
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.