I got a carousal template from getbootstrap.com (bootstrap 4) however, I'm having trouble making the carousal responsive on mobile screens. On smaller screens the text gets cut up and the carousal indicator gets merged with the text, and it only displays two testimonials at a time. I tried to make the testimonials stack on top of each other on smaller screens by using col-sm-12 however its not working.
Css:
width: 100%;
height: 400px;
word-wrap: break-word;
overflow-wrap: break-word;
}
#carouselExampleIndicators .carousel-item .row{
height: 300px;
}
/* testimonial columns */
#carouselExampleIndicators .carousel-item .col{
width: 100%;
margin: 10px;
color: black;
}
/* styling arrows */
#carouselExampleIndicators .carousel-control-prev .fa-chevron-left{
font-size: 30px;
color: black;
}
#carouselExampleIndicators .carousel-control-next .fa-chevron-right{
font-size: 30px;
color: black;
}
/* styling slide indicators */
#carouselExampleIndicators .carousel-indicators li{
background-color: black;
}
/* styling quotations */
#carouselExampleIndicators .fa-solid.fa-quote-left{
font-size: 40px;
padding-bottom: 15px;
}
/* customer review */
#carouselExampleIndicators #testimonial-text{
font-size: 19px;
padding-bottom: 5px;
}
/* name */
#carouselExampleIndicators #testimonial-source .name{
font-size: 20px;
}
/* company */
#carouselExampleIndicators #testimonial-source .company{
font-size: 15px;
font-weight: 500;
color: var(--clr-signode-red);
}
HTML
<div class="container">
<!-- heading -->
<div class="featurette-heading">
<h5 class="sub-heading text-center">Testimonials</h5>
<h2 class="fw-normal lh-1 main-heading text-center">From Our Customers</h2>
</div>
<div class="d-flex justify-content-center">
<div class="divider-dash "></div>
</div>
<!-- end heading -->
</div>
<div class="container-fluid">
<!-- testimonials carousel -->
<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">
<!-- TESTIMONIAL PAGE -->
<div class="carousel-item active">
<div class="carousel-caption">
<div class="row">
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Company Name</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Company Name</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Company Name</div>
</div>
</div>
</div>
</div>
</div>
<!-- TESTIMONIAL PAGE -->
<div class="carousel-item">
<div class="carousel-caption">
<div class="row align-items-center">
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
</div>
</div>
</div>
<!-- TESTIMONIAL PAGE -->
<div class="carousel-item">
<div class="carousel-caption">
<div class="row align-items-center">
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- carousel arrows -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span><i class="fa-solid fa-chevron-left" aria-hidden="true"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span><i class="fa-solid fa-chevron-right" aria-hidden="true"></i></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
What it looks like on XL screens What it looks like on mobile
