I've made a carousel on my webpage, works fine on the computer, when I make it smaller but on mobile it stays stretched

Question

I've made a carousel on my webpage, works fine on the computer, it follows it well when I make it smaller on the screen but on mobile it stays stretched vertically making it very long/high. I've tried to change heights and all the other standard procedure but the confusing part is that it works so well on computer but not on mobile. In my head that shouldn't be possible

 .carousel { max-height: 790px; } .carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block !important; } .carousel img { width: 100% !important; max-height: 790px; } .carousel-inner { width: 90% !important; margin: auto !important; } 

 <div style="max-width:100%" class="container"> <div class="row"> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="img\\homeg1.jpeg" alt="First Picture"> </div> <div class="carousel-item"> <img src="img\\homeg3.jpeg" alt="Second Picture"> </div> <div class="carousel-item"> <img src="img\\homeg4.jpeg" alt="Third Picture"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> </div> 

Answer 1

All you need is the images to be responsive via the img-fluid class and you'll get a similar experience on Desktop and mobile...

I have removed your css... removed inline max-width:100% from the parent div... added img-fluid classes to the images

following code works for you?

 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg" alt="First Picture"> </div> <div class="carousel-item"> <img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg" alt="Second Picture"> </div> <div class="carousel-item"> <img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/3.jpg" alt="Third Picture"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> </div>