Currently, I am working on an image slider that features two arrow keys. The issue arises when I attempt to adjust the viewport to a smaller size. While the image slider responds by changing its size accordingly, the arrow keys do not follow suit. I am unsure of how to link them to the image slider in order to make them responsive. This problem became apparent when I switched from my monitor to a PC with a smaller resolution and noticed that the right arrow key disappeared.
Here is an example illustrating my dilemma: jsfiddle
<div class="container">
<div class="slider"><img src="https://i.ytimg.com/vi/suIr-M1p8yU/maxresdefault.jpg" alt=""> </div>
<div class="arrows index">
<a href="#" class="left"><</a>
<a href="#" class="right">></a>
</div>
</div>
.container{
max-width:1100px;
margin: 0 auto;
width:100%;
height: auto;
}
.slider{
position:relative;
}
.slider img{
position:absolute;
width:100%;
height:auto;
left:0;
top:0;
object-fit:cover;
}
.arrows {
font-size: 3.125em;
position: relative;
width: 100%;
}
.arrows .left {
position: absolute;
color: white;
top: 8em;
left: 0.4em;
border: 0.02em solid #fefefe;
border-radius: 0.14em;
padding: 0em 0.4em 0.2em;
background: #F2B8A2;
}
.arrows .right {
position: absolute;
color: white;
top: 8em;
left: 20.2em;
border: 0.02em solid #fefefe;
border-radius: 0.14em;
padding: 0em 0.4em 0.2em;
background: #F2B8A2;
}