Despite successfully creating a carousel with 12 cards and 6 cards on each side, I am facing challenges with the responsiveness on mobile screens. I have tried numerous methods to make it responsive but have not achieved the desired results. The behavior of the carousel on mobile screens can be seen in this image: Carousel with cards. I have implemented my own carousel controls and I aim to utilize these controls for responsiveness. I also attempted to use the col-sm-2 feature without success.
.card-icon {
position: absolute;
top: 50%;
right: -39px;
transform: translateY(-50%);
}
.carousel-inner .active {
display: block;
}
.carousel-inner-one{
height: 200px;
}<div class="carousel-container">
<div id="carouselExampleControls" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-inner-one">
<div class="carousel-item active">
<div class="row">
<div class="col-sm-1 col-md-6 my-4 d-flex">
<div class="card">
<div class="card-image">
<img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
</div>
<div class="card-body text-center">
<h5 class="card-title">Buffalo Wings</h5>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-1 col-md-6 my-4">
<div class="card">
<div class="card-image">
<img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
</div>
<div class="card-body text-center">
<h5 class="card-title">Buffalo Wings</h5>
</div>
</div>
</div>
<div class="col-xl-2 col-sm-1 col-md-6 my-4">
...
...
... (more card elements in similar structure)
...
...
</div>
<div class="icon">
... (button for carousel control)
</div>
<div class="card-icon">
... (button for carousel control)
</div>
</div>
</div>
</div>
</div>
</div>