Known Participant

Question

Flexbox overlapping footer

Forum|Forum|8 years ago
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.

BenPleysier

Community Expert

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!

M

MQuilitzschAuthor

Known Participant

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.

O

osgood_

Legend

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