Есть 6 картинки которые стоят в столбик, мне нужно чтобы в мобильной версии они располагались по 2 в каждом ряду.
Но почему-то не работает. Подскажите в чем проблема? как расположить их по 2 в каждом ряду?
* {
box-sizing: border-box;
}
img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}
.picture-box {
width: 70%; /* limit screen width - max width could have been used aswell */
margin: 0 auto; /* center content */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.ring {
padding: 10px;
text-align: center; /* Center ring div */
}
@media screen and (min-width: 1200px) {
.ring {
width: 25%;
}
}
@media screen and (max-width: 1199px) {
.ring {
width: 33.33%;
}
}
@media screen and (max-width: 768px) {
.ring {
width: 50%;
}
.picture-box {
width: 100%;
}
}
.thumb {
display: inline-block;
max-width: 200px;
padding: 10px;
border: 1px solid blue;
}
<div class="picture-box">
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
</div>