Skip to main content
Known Participant
April 6, 2017
Question

Flexbox overlapping footer

  • April 6, 2017
  • 1 reply
  • 920 views

I'm working on a flexbox containing ten equal figures, I justified the content, but when the items spread downward, they overlap the footer.

The footer also appears further up the screen in a mobile view.

I'm not sure what's wrong.

    This topic has been closed for replies.

    1 reply

    BenPleysier
    Community Expert
    Community Expert
    April 6, 2017

    Please share the code with us, that way we can set you on the right track.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Known Participant
    April 6, 2017

    Sorry, I no longer kept the code as it was.

    I basically tried using .container { justify-content: center; } for a container with a row of ten squares (which will end up being linked tiles) in a figure/figcaption tag.

    The responsive actions worked well, but the lower items dropped into the footer.

    Legend
    April 6, 2017

    mattq74570375  wrote

    Sorry, I no longer kept the code as it was.

    I basically tried using .container { justify-content: center; } for a container with a row of ten squares (which will end up being linked tiles) in a figure/figcaption tag.

    The responsive actions worked well, but the lower items dropped into the footer.

    If I was using Flexbox I'd do it like below.

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8"/>

    <title>Flexbox</title>

    <style>

    .wrapper {

    display: flex;

    flex-wrap: wrap;

    }

    figure {

    padding: 0;

    margin: 0 1% 25px 1%;

    background-color: #f2f2f2;

    width: 18%;

    text-align: center;

    }

    @media screen and (max-width: 768px) {

    figure {

    width: 31.33%;

    }

    }

    @media screen and (max-width: 480px) {

    figure {

    width: 48%;

    }

    }

    footer {

    text-align: center;

    padding: 20px;

    }

    </style>

    </head>

    <body>

    <div class="wrapper">

    <figure>

    Image

    <figcaption>Caption</figcaption>

    </figure>

    <figure>

    Image

    <figcaption>Caption</figcaption>

    </figure>

    <figure>

    Image

    <figcaption>Caption</figcaption>

    </figure>

    <figure>

    Image

    <figcaption>Caption</figcaption>

    </figure>

    <figure>

    Image

    <figcaption>Caption</figcaption>

    </figure>

    <figure>

    Image

    <figcaption>Caption</figcaption>

    </figure>

    <figure>

    Image

    <figcaption>Caption</figcaption>

    </figure>

    <figure>

    Image

    <figcaption>Caption</figcaption>

    </figure>

    <figure>

    Image

    <figcaption>Caption</figcaption>

    </figure>

    <figure>

    Image

    <figcaption>Caption</figcaption>

    </figure>

    </div>

    <!-- end wrapper -->

    <footer>

    Footer

    </footer>

    </body>

    </html>