I'm struggling with making my Bootstrap Carousel responsive. Below is the code I currently have:
<div id="slider" class="slider carousel slide">
<div class="carousel-inner" align="center">
<div class="item active">
<div style="display: flex;flex-direction:row; justify-content: center; align-items: center;">
<div><p style="font-family:'Aleo';color: #4e4c4a;font-size: 13vw;top:-30px;position:relative;">AR111</p><p style="font-family:'Aleo';color: #4e4c4a;font-size: 2vw;top:-80px;position:relative;">Description of the product goes here <br> about 2 lines</p></div>
<div style=""><img src="images/ar111.png" class="img-responsive"></div>
</div>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
<a class="left carousel-control" href="#slider" data-slide="prev">
<span class="glyphicon glyphicon-circle-arrow-left"></span>
</a>
<a class="right carousel-control" href="#slider" data-slide="next">
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
This is the desired look of the slider on all screens.
View it live here:
However, the layout gets distorted depending on screen resolution. I attempted to use flexbox for more flexibility but it's still not working. How can I make sure the elements inside the slider resize uniformly based on screen size?