I am facing an issue with a row of images on my website. On a normal large display, the images align nicely across the screen. However, when viewed on a smaller screen, the images shrink and remain horizontal instead of stacking vertically. How can I make this layout responsive so that the images stack vertically on smaller screens?
<div class="container">
<div class="imgRow">
<div class="d-flex justify-content-around">
<div class="col-sm-3 w-25">
<img
src="image1.jpg"
class="img-fluid"
alt="..."
/>
</div>
<div class="col-sm-3 w-25">
<img
src="image2.jpg"
class="img-fluid"
alt="..."
/>
</div>
<div class="col-sm-3 w-25">
<img
src="image3.jpg"
class="img-fluid"
alt="..."
/>
</div>
</div>
</div>
</div>
My current CSS for this row is:
.container .imgRow {
padding-bottom: 10%;
}
@media only screen and (max-width: 768px) {
.imgRow img {
width: 100;
}
}
I have attempted various solutions like removing the CSS properties, adjusting the image-fluid class, changing column sizes, eliminating the container, and modifying justify-content values without success.