As I embark on learning responsive CSS, the concept is still quite new to me. One issue I'm facing is the alignment of the images on the second row in comparison to the top images. I aim to have 4 images per row, with the flexibility for the image size and number of images to adjust on smaller screens or phones. Despite trying, I can't seem to achieve this. Any guidance or assistance would be greatly appreciated! The CSS styling for the images is all contained within that one static page.
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 10px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: right;
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%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://memorybox.pt">
<img src="images/memory-box.png" alt="Algarve Wedding Photography" width="600" height="400">
</a>
<div class="desc">Algarve Wedding Planners</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://algarvedjhire.com/">
<img src="images/algarve_dj_hire.jpg" alt="Algarve Wedding Photography" width="600" height="400">
</a>
<div class="desc">Algarve DJ & Music</div>
</div>