Избегайте изображений, чтобы их уложить на мобильный сайт

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>