Flexbox overlapping footer

Report · Apr 05, 2017

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.

Report · Apr 05, 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!

Report · Apr 05, 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.

Report · Apr 06, 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>

<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>

Image