how to increase my slider width on mobile screen - html

Question

i have a problem that my slider on mobile screen is very small i tried to use media query to make it bigger on mobile screen but did not work
here is my code for slider
<section id="watch-app">
<h2 class="watch-head">watch app</h2>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="imgs/watch-app.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="imgs/watch-app1.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="imgs/watch-app.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class=" carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</section>
and here is my css code for that section
#watch-app{
padding: 7rem;
text-align: center;
}
.img-fluid{
margin: 0 auto;
max-width: 650px;
padding-top: 6rem;
}
.carousel-indicators li{
width: 20px;
height: 20px;
background-color:white;
border-radius: 50%;
border: 1px solid #f16054;
}
.carousel-indicators {
bottom: -5rem;
}
.carousel-indicators .active{
background-color:#ef473a;
}
.carousel-control-next-icon{
width: 90px;
height: 80px;
background-image: url(../imgs/right-arrow.jpg);
margin-top: 5rem;
}
.carousel-control-prev-icon{
width: 90px;
height: 80px;
background-image: url(../imgs/left-arrow.png);
margin-top: 5rem;
}
and here is my media query
#media (max-width: 768px) {
.img-fluid{
max-width: 900px;
margin: 0 auto;
}
}
this how my slider look like in the normal screen
normal screen
and that how it look like on mobile screen
mobile screen

Answer 1

You have to add a width: 100%; with your max-width