Witam!
Więc zmieniłem kod mojej strony siatkę CSS ale coś chyba nie działa bo nie zmniejsza się to w taki sposób w jaki powinno ponieważ podczas zmniejszania trzecie zdjęcia w obu rzędach nie zmniejszają się i przez to na dole strony pojawia się pasek przewijania lewo-prawo
<section>
<div class="container1">
<div class="row">
<div class="col-4" style=" margin-top: 40%;">
<img src="img/nature.jpg" alt="alternative text"></a>
</div>
<div class="col-4" style=" margin-top: 40%;">
<img src="img/mountains.jpg" alt="alternative text"></a>
</div>
<div class="col-4" style=" margin-top: 40%;">
<img src="img/sea.jpg" alt="alternative text"></a>
</div>
<div class="col-4" >
<img src="img/cliff.jpg" alt="alternative text"></a>
</div>
<div class="col-4">
<img src="img/city.jpg" alt="alternative text"></a>
</div>
<div class="col-4">
<img src="img/freedom.jpg" alt="alternative text"></a>
</div>
</div>
</div>
</section>
.container1
{
width: 100%;
max-width: 1170px;
margin: 0 auto;
padding: 0 0 0 1%;
}
.row {
clear: both;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
float: left;
margin: 0 3% 0 0;
}
.col-4
{
margin-left: 0;
margin-right: 0;
}
@media screen and (min-width:768px)
{
.col-1 {width: 5.5%;}
.col-2 {width: 14%;}
.col-3 {width: 22.5%;}
.col-4 {width: 31%;}
.col-5 {width: 39.5%; }
.col-6 {width: 48%;}
.col-7 {width: 56.5%;}
.col-8 {width: 65%;}
.col-9 {width: 73.5%;}
.col-10 {width: 82%;}
.col-11 {width: 90.5%;}
.col-12 {width: 99%;}
}
No i co teraz trzeba zrobić aby to było tak jak ma być ?
Mam nadzieję że ktoś mi pomoże ;)
Dzięki za poświęcony czas!