I am trying to create a scrollable slider with these rectangles, but the issue arises when the window size is reduced and the rectangles scale down.
I have included images for better clarification.
I attempted to set the width and height of the div elements with the "years" class, but it did not resolve the problem.
.years-center {
text-align: center;
display: flex;
overflow-x: scroll;
}
.years {
display: inline-block;
margin: 10px;
width: 220px;
height: 150px;
background-color: #FFFFFF;
margin-top: -60px;
box-shadow: 0 0px 29px rgba(0,0,0,0.15);
}
.years-p {
font-size: 80px;
color: rgb(68, 68, 68);
font-weight: 900;
line-height: 0.252;
text-align: center;
padding-top: 45px;
}
.years-name {
font-size: 21px;
font-family: "Muli";
color: rgb(68, 68, 68);
font-weight: bold;
line-height: 1.238;
text-align: center;
padding-top: 34px;
}<div class="years-center">
<div class="years years1">
<p class="years-p">8</p>
<p class="years-name">let na trhu</p>
</div>
<div class="years years2">
<p class="years-p">10</p>
<p class="years-name">profesionálů</p>
</div>
<div class="years years3">
<p class="years-p">32</p>
<p class="years-name">stálých klientů</p>
</div>
<div class="years years4">
<p class="years-p">27</p>
<p class="years-name">věkový průměr</p>
</div>
</div>Another similar issue can be seen in this section. The solution provided only addresses the first problem.
HTML
<div class="trusts-slider">
<div class="company">
<div><img src="img/duveruje/prima.png" alt="prima"></div>
<div><img src="img/duveruje/hayashi.png" alt="hayashi"></div>
<div><img src="img/duveruje/projekt.png" alt="projekt"></div>
<div><img src="img/duveruje/heckl.png" alt="heckl"></div>
</div>
<div class="company second-company">
<div><img src="img/duveruje/energy.png" alt="energy"></div>
<div><img src="img/duveruje/ipconnect.png" alt="ipconnect"></div>
<div><img src="img/duveruje/rts.png" alt="rts"></div>
<div><img src="img/duveruje/cejka.png" alt="cejka"></div>
</div>
</div>
CSS
.trusts-slider {
overflow-x: scroll;
}
.company {
margin-left: 14%;
margin-right: 14%;
display: flex;
justify-content: space-between;
text-align: center;
padding-bottom: 17px;
}
.company div {
padding-top: 50px;
background-color: white;
width: 240px !important;
height: 170px !important;
box-shadow: 0 0px 29px rgba(0,0,0,0.06);
margin-left: 10px;
margin-right: 10px;
}
.second-company {
padding-bottom: 69px;
}