• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Flexbox overlapping footer

Explorer ,
Apr 05, 2017 Apr 05, 2017

Copy link to clipboard

Copied

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.

Views

683

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 05, 2017 Apr 05, 2017

Copy link to clipboard

Copied

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

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 05, 2017 Apr 05, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 06, 2017 Apr 06, 2017

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 06, 2017 Apr 06, 2017

Copy link to clipboard

Copied

LATEST

Ok great!

I'll give that a try tomorrow.

Thanks so much.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines