I am trying to create an image grid. It looks decent on my screen,but I cant make it responsive.When it goes beyond 1000px width it starts to stretch in one row.
I am trying to push vertical each img div when the device width is getting smaller.
Can anyone help me with what I have to start to make my image grid responsive. Already tryed to make display table-cell and float left but didnt work. Here is my code:
HTML
<div class="container">
<div class="d-flex">
<div class="img-wrapper-20">
<img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
<p class="galp">Some Text</p>
</div>
<div class="img-wrapper-20">
<img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
<p class="galp">Some Text</p>
</div>
<div class="img-wrapper-20">
<img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
<p class="galp">Some Text</p>
</div>
<div class="img-wrapper-20">
<img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
<p class="galp">Some Text</p>
</div>
<div class="img-wrapper-20">
<img src="https://informnutrition.com/wp-content/uploads/2019/03/Super-booster-Sheep-400x300.png" width="400px" height="300px" class="img-fluid img-thumbnail shadow" alt="Sheep 11">
<p class="galp">Some Text</p>
</div>
</div>
</div>
CSS
.container {
padding: 5rem 0rem;
}
.img-wrapper-20 {
width: 20%;
margin: 0rem 1.5rem 0rem 0rem;
}
.img-wrapper-20 img:hover {
transform: scale(1.08);
}
.galp {
margin-top: 20px;
text-align: center;
font-size: 20px;
font-weight: 700;
color: black;
}
@media screen and (max-width: 1000px) {
}