i'm using boostrap Carousel i put few items on image in laptop view it's looking perfect but on mobile view items are not showing
here is laptop view
here is the mobile view
<section class="hero-wrap">
<div id="carouselExampleCaptions" class="carousel slide" 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="images/bg_1.jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<div class="overlay"></div>
<div class="container">
<div class="row slider-text ">
<div class="col-md-10 ftco-animate text-center">
<br><br>
<div class="icon">
<span class="flaticon-lotus"></span>
</div>
<h1>Spa & Beauty Center</h1>
<div class="row justify-content-center">
<div class="col-md-7 mb-3">
<p>Far far away, behind the word mountains, far from the countries Vokalia
and
Consonantia,
there live the blind texts.</p>
</div>
</div>
<p>
<a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a>
<a href="booking.php"
class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="images/bg_2.jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<div class="overlay"></div>
<div class="container">
<div class="row slider-text">
<div class="col-md-10 ftco-animate text-center">
<div class="icon">
<span class="flaticon-lotus"></span>
</div>
<h1>Spa & Beauty Center</h1>
<div class="row justify-content-center">
<div class="col-md-7 mb-3">
<p>Far far away, behind the word mountains, far from the countries Vokalia
and
Consonantia,
there live the blind texts.</p>
</div>
</div>
<p>
<a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a>
<a href="booking.php"
class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="images/bg_3.jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<div class="overlay"></div>
<div class="container">
<div class="row slider-text">
<div class="col-md-10 ftco-animate text-center">
<div class="icon">
<span class="flaticon-lotus"></span>
</div>
<h1>Spa & Beauty Center</h1>
<div class="row justify-content-center">
<div class="col-md-7 mb-3">
<p>Far far away, behind the word mountains, far from the countries Vokalia
and
Consonantia,
there live the blind texts.</p>
</div>
</div>
<p>
<a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a>
<a href="booking.php"
class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And css code is
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat scroll center scroll;
\--webkit-background-size: cover;
background-size: cover;
}
.carousel-item::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
opacity: 0.1;
}
.carousel-caption{
bottom:75px;
padding-left:200px;
padding-right:50px;
}
@media (max-width: 600px) {
.carousel-item {
height: 0;
min-height: 270px;
}
}
i'm using boostrap Carousel i put few items on image in laptop view it's looking perfect but on mobile view items are not showing
here is laptop view
here is the mobile view
It is because Bootstrap displays .d-none class as none (with !important). If you want to overwright Bootstrap and show it in small screens use inline css (in HTML). You will also then need to add style accordingly for small screens (decrease size of buttons..)