I am encountering a problem with the carousel control buttons in Bootstrap, as shown in this image: https://i.sstatic.net/olfKU.png
However, when I disable the width: 15% property in the devTools on Chrome, the issue resolves itself: https://i.sstatic.net/LgZeK.png https://i.sstatic.net/yhcEg.png
I attempted to set width: auto, but I couldn't find a way to address it in my code below. Is there a method to turn off the width of the carousel-control-prev and carousel-control-next:
.carousel {
display: flex;
.carousel-inner {
.carousel-item {
.testimony {
display: flex;
img {
width: 150px;
height: 150px;
object-fit: cover;
aspect-ratio: 1;
border-radius: 75px;
margin-right: 27px;
}
.name {
font-weight: bold;
display: block;
}
}
}
}
.carousel-control-prev,
.carousel-control-next {
position: relative;
opacity: 1;
}
.carousel-control-prev-icon {
width: 50px;
height: 50px;
mask-image: url("../../public/img/carousel-arrow.svg");
background-color: $red;
transition: background-color 100ms ease-in, opacity 100ms ease-in;
&:hover {
background-color: #DF011F;
opacity: 0.8;
}
}
.carousel-control-next-icon {
width: 50px;
height: 50px;
mask-image: url("../../public/img/carousel-arrow.svg");
transform: rotate(180deg);
background-color: $red;
transition: background-color 100ms ease-in, opacity 100ms ease-in;
&:hover {
background-color: #DF011F;
opacity: 0.8;
}
}
@include media-breakpoint-down(md) {
.carousel-control-prev-icon {
transform: scale(0.75);
}
.carousel-control-next-icon {
transform: rotate(180deg) scale(0.75);
}
}
}<div id="carousel" class="carousel slide" data-bs-ride="carousel">
<button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="testimony">
<img src="{{ asset('img/talents/sylvie.jpg') }}" alt="john doe" class="d-none d-lg-block">
<div>
<p>test</p>
<span class="name">John Doe</span>
<span class="job">Chief</span>
</div>
</div>
</div>
</div>
<button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>