There are 6 pictures that stand in a column, I need to have them in the mobile version of 2 in each row.

But for some reason it does not work. Tell me what's the problem? How to arrange them on 2 in each row?

* { 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>

  • And what are you doing, what would be 2 pictures in a row? I do not see such properties. - E_K
  • @E_K padding gave. can you explain? - asdas

2 answers 2

Add @media screen and (max-width: 768px) {.picture-box { flex-direction:column; }} @media screen and (max-width: 768px) {.picture-box { flex-direction:column; }}

 * { 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%; } .picture-box { flex-direction:column; } } .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>

    You did not specify the size of the block with pictures, so the flex container holds as many pictures in one line as the size will allow. Because of the flex-wrap: wrap property, the rest is carried over to the next line.

    You need to specify the block size .ring for the desired screen size, so that for mobiles to get 2 blocks in a row you need 50% width (this is without taking into account the margin ). It is necessary to take into account the dimensions of the image, if they are fixed blocks will shift all the same, because they do not fit in size. To do this, you can make responsive images or use overflow: hidden .

     * { box-sizing: border-box; } img { width: auto; max-width: 100%; height: auto; max-height: 100%; } .picture-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 3rem 1.5rem; } .ring { flex: 0 0 calc(50% - 10px); padding: 20px; margin-bottom: 20px; border: 1px solid green; text-align: center; } .thumb { display: inline-block; max-width: 200px; padding: 10px; border: 1px solid blue; } @media all and (min-width: 1024px) { .ring { flex: 0 0 calc((100% / 3) - (40px / 3)) } } @media all and (min-width: 1240px) { .ring { flex: 0 0 calc((100% / 6) - (100px / 6)) } } 
     <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>

    • The thing is, I need their flex-direction be not a row but a column , I fixed it, but now they are not 2 pieces in a row, but under each other. How can this be fixed? - asdas 1:01 pm
    • The question must be asked correctly initially. To change it, replace the flex property with width with the same width and limit the height of the flex container. - E_K pm
    • I did as you said, but failed. I added the updated code to the question. Look here please. - asdas