Hi there, I'm a newcomer to Stack Overflow and currently diving into the world of HTML/CSS. I've hit a roadblock with my latest project - I'm trying to create a gallery of album covers, but when I try to 'zoom in' on the webpage (not sure if that's the correct term), the layout gets all wonky. I suspect it's a responsive issue, as I attempted to add a media query but can't seem to get it right. How can I adjust the gallery so that it smoothly transitions from displaying 5 album covers in a row to 4 without leaving any gaps?
I've included the relevant code snippet in this link, but if you need more information, I'd be happy to share the full messy code:
https://codepen.io/LotteElders/pen/ZEpeRzN
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.responsive {
padding: 0 6px;
float: center;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
</style>
<figure>
<figcaption>
<h3>A summary of Cady Groves's albums</h3>
</figcaption>
<!-- Album Gallery -->
</figure>
Thanks for taking the time to help me out!