Избегайте размещения изображений на мобильном сайте

Question

Я только начал изучать кодирование и решил создать свой сайт, используя squarespace а также www.rociodelfa.com,

Моя главная проблема заключается в том, что на моей странице вдохновения есть галерея изображений, которые должны следовать сплоченному порядку, и я хочу зафиксировать количество изображений в строке, но оно не одинаково для каждой строки.

При открытии на мобильном устройстве изображения складываются. Как мне это изменить?

Answer 1

Проверьте код, который я приложил.

* {
   box-sizing: border-box;
}

.wrapper {
  width: 20%; /* Let's assume you want 5 pictures in a row, so 100%/5 = 20% */
  float: left;
  padding: 10px;

  }
.wrapper img {
  width: 100%;
}

<div class="wrapper">
  <img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
  <img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
  <img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
  <img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
  <img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
  <img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
  <img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
  <img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
  <img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
  <img src="http://placehold.it/300x300">
</div>