4 Replies Latest reply on Apr 6, 2017 1:21 AM by mattq74570375

    Flexbox overlapping footer

    mattq74570375

      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.

        • 1. Re: Flexbox overlapping footer
          BenPleysier Adobe Community Professional & MVP

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

          • 2. Re: Flexbox overlapping footer
            mattq74570375 Level 1

            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.

            • 3. Re: Flexbox overlapping footer
              osgood_ Level 8

              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>

              • 4. Re: Flexbox overlapping footer
                mattq74570375 Level 1

                Ok great!

                I'll give that a try tomorrow.

                 

                Thanks so much.