I'm trying to create a small grid of images. On desktops, I want 3 images per column, and on mobiles, I want 2 images per column. I have no problem doing that. Problems start when I shrink the page to mobile size. The images are in the proper order, but they do not shrink; they keep their original size, and the one on the right goes out of the grid (you can't see half of it). I tried max-width:100%
, width:100 %
, etc., but it did not work.
.sponsors1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media(max-width:768px) {
.sponsors1 {
grid-template-columns: 1fr 1fr;
justify-self: center;
grid-gap: 8px;
margin-top: 10px;
margin-bottom: 20px;
align-items: center;
overflow:
}
.img1 {
justify-self: center;
}
.img2 {
justify-self: center;
}
.img3 {
justify-self: center;
}
}
<div class="sponsors1">
<a href="#/" class="img1"><img src="images/#.png" alt=""></a>
<a href="#" class="img2"><img src="images/#.jpg" alt=""></a>
<a href="#" class="img3"><img src="images/#.png" alt=""></a>
</div>
You should set your image containers' justify-self
properties to stretch
and then set the image's (NOT their containers') widths to 100%
.
.sponsors1{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media(max-width:768px){
.sponsors1{
grid-template-columns: 1fr 1fr;
justify-self:center;
grid-gap: 8px;
margin-top: 10px;
margin-bottom: 20px;
align-items:center;
overflow:
}
.img1{
justify-self: stretch;
}
.img2{
justify-self: stretch;
}
.img3{
justify-self: stretch;
}
}
img {
width: 100%
}
<div class="sponsors1">
<a href="#" class="img1"><img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt=""></a>
<a href="#" class="img2"><img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt=""></a>
<a href="#" class="img3"><img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt=""></a>
</div>