Я пытаюсь сделать небольшую сетку изображений. На настольных компьютерах мне нужно 3 изображения на столбец, а на мобильных устройствах - 2 изображения на столбец. У меня нет проблем с этим. Проблемы начинаются, когда я уменьшаю размер страницы до размера мобильного устройства. Изображения находятся в правильном порядке, но они не сжимаются, они сохраняют свой исходный размер, а изображение справа выходит за пределы сетки (вы не можете видеть половину). Я пробовал max-width: 100%, width: 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: 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>