I am facing an issue with my bootstrap carousel. One of the items only contains a background image without any content. I have set a height for it so that it is still visible even without content. However, when viewing on mobile devices, I can only see a portion of the image. How can I make the image resize according to screen size or in responsive web design view? I tried using position absolute on the specific item and making the parent div position relative, but the item disappears when position absolute is applied.
Here's the code snippet:
<div id="custom-banner-wrapper" style="position: relative;">
<div id="custom-banner" class="carousel slide" data-ride="carousel">
<div class="carousel-inner custom-banner-inner">
<div id="custom-banner-fullwidth" class="item custom-banner-item active"
style='background-color: #2c1946; background-image: url("./catalog/view/theme/broadwaytheme/images/banner-1.png"); background-repeat:no-repeat; background-position: top center; background-size: cover; position:absolute;'>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 custom-banner-caption">
</div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators" style="bottom:0px;">
<li data-target="#custom-banner" data-slide-to="0" class="active"></li>
<li data-target="#custom-banner" data-slide-to="1"></li>
<li data-target="#custom-banner" data-slide-to="2"></li>
</ol> </div></div>