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.
Copy link to clipboard
Copied
Please share the code with us, that way we can set you on the right track.
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.
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>
Copy link to clipboard
Copied
Ok great!
I'll give that a try tomorrow.
Thanks so much.