I recently created a slider using bootstrap and encountered an issue with image display on mobile screens compared to laptop screens.
On a Laptop screen:
On a Mobile screen:
The images on the mobile screen are not fitting properly within the slider, and the text is not displayed as intended. How can I adjust the image size to match how it appears on a laptop screen?
Below is the code for the slider :
<!-- slider -->
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src='./images/charity11.jpg' class='img1' />
<div class="carousel-caption">
<h3 class='title'>Let Us All Come Together</h3>
<em class='subtext'>"..and be a blessing to someone else."</em>
</div>
</div>
<div class="item">
<img src='./images/child2.jpg' class='img1' />>
<div class="carousel-caption">
<h3 class='title'>Education is the vaccine for violence</h3>
<em class='subtext'>"..and love, the poet said, is woman's whole existence."</em>
</div>
</div>
<div class="item">
<img src='./images/tree.jpg' class='img1' />
<div class="carousel-caption">
<h3 class='title'>Lend a hand to save trees</h3>
<em class='subtext'>"..let the green be seen."</em>
</div>
</div>
<div class="item">
<img src='./images/dr1.jpg' class='img1' />
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- slider ends -->
CSS :
.item{
background: #333;
text-align: center;
height: 420px !important;
}