[Support request] Flexbox

Home Forums Support Flexbox

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #956308
    Klaus

    Hello, I would like to create a flexbox with three columns (to replace the Lightweight Grid Column Plugin). I want it to look pretty also on mobile (like three columns on desktop, two columns on tablet and one column on a smartphone). Would you have some css – or advice – for me to do that? Klaus

    #956365
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This article is great: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    The idea is simple:

    <div class="flex-container">
        <div class="flex-item">
    
        </div>
    
        <div class="flex-item">
    
        </div>
    
        <div class="flex-item">
    
        </div>
    </div>

    CSS:

    .flex-container {
        display: flex;
    }
    
    .flex-item {
        width: 33.333%;
    }
    
    @media (max-width: 1024px) {
        .flex-item {
            width: 50%;
        }
    }
    
    @media (max-width: 768px) {
        .flex-item {
            width: 100%;
        }
    }

    Hope this helps get you started 🙂

    #956662
    Klaus

    Thanks a lot, but: hm, the CSS doesn’t work. (Do you know why? Is it GP related?)

    Out of your code I have done this:

    .flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    }

    img.scaled {
    width: 100%;
    }

    .flex-item {
    flex-basis: 30%;
    }


    @media
    (max-width: 1024px) {
    .flex-item {
    flex-basis: 46.5%;
    }
    }


    @media
    (max-width: 768px) {
    .flex-item {
    flex-basis: 100%;
    }
    }

    Thanks for putting me on the right track. You can see the result here https://honigwerk.de

    #956895
    Tom
    Lead Developer
    Lead Developer

    What about it isn’t working? I’m seeing columns on that page using Flexbox.

    Let me know 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.