Bootstrap карусель на мобильный

Question

Моя карусель boostrap не работает на мобильных устройствах, также изображения выглядят обрезанными и недостаточно высокими, чтобы покрыть пространство, которое должно занимать. На нормальных сайтах сайты, кажется, работают хорошо.

Здесь html и css код ... Кто-нибудь может помочь с этим, пожалуйста? заранее спасибо за помощь

<div class="cover">
<div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/home3.jpg" class="d-block w-100 " alt="...">
<div class="carousel-caption">
<h1>Text</h1>
<h2>text</h2>
<p>text.</p>
</div>
</div>
<div class="carousel-item img-fluid">
<img src="img/home2.jpg" class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption img-fluid">
<h1>Text</h1>
<h2>text</h2>
<p>text.</p>
</div>
</div>
<div class="carousel-item ">
<img src="img/home1.jpg" class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption">
<h1>Text</h1>
<h2>text</h2>
<p>text.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

.carousel-item {
height: 600px;
}
.item img {
    position: absolute;
    object-fit:cover;
    top: 0;
    left: 0;
    min-height: 400px;
}

.carousel-caption {
   position: absolute;
   top:10px;
}