I've been working on a small project and trying to incorporate the Bootstrap 4 carousel. I followed the example code provided on their website, shown below. Everything looks great when I view the website on mobile, as expected. However, on a laptop screen, the slider images take up half of the screen - they're too big. Even when I zoom out in the browser (using Chrome and Firefox), the images remain oversized. To try and fix this, I attempted to create a media query in the CSS file like so:
@media only screen and (min-width: 768px) {
.myCarousel .carousel .carousel-inner .img {
height: 250px;}
}
Unfortunately, this solution did not work. Below is the HTML code for reference:
<div class="myCarousel">
<div id="carouselCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselCaptions" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" data-interval="2000">
<img src="{% static 'img/slider/slide1.jpg' %}" class="d-block w-100" alt="">
<div class="carousel-caption">
<h5>First Slide Caption</h5>
</div>
</div>
<div class="carousel-item" data-interval="2000">
<img src="{% static 'img/slider/slide2.png' %}" class="d-block w-100" alt="">
<div class="carousel-caption">
<h5>Second Slide Caption</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselCaptions" 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="#carouselCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Any help or suggestions would be greatly appreciated.