title: how to make bootstrap 4 carousel images small on big screens
body: <p>I am trying to use bootstrap 4 carousel on my small project. I used the example code provided in their website, which is reproduced below. When I view the website from mobile, it is perfect, as expected. However, on the laptop screen, the slider images are half of the screen - very big. Even if I zoomed out the browser (chrome and Firefox), the images remain as big as they are. I tried to make a media query in the CSS file as follows:</p>
  
  <pre><code>@media only screen and (min-width: 768px) {
   .myCarousel .carousel .carousel-inner .img {
  height: 250px;}
  }
  </code></pre>
  
  <p>However, it did not work. Below is the HTML code for your kind reference:</p>
  
  <pre><code>       &lt;div class="myCarousel"&gt;
          &lt;div id="carouselCaptions" class="carousel slide" data-ride="carousel"&gt;
              &lt;ol class="carousel-indicators"&gt;
                  &lt;li data-target="#carouselCaptions" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                  &lt;li data-target="#carouselCaptions" data-slide-to="1"&gt;&lt;/li&gt;                  
              &lt;/ol&gt;
              &lt;div class="carousel-inner"&gt;
                  &lt;div class="carousel-item active" data-interval="2000"&gt;
                      &lt;img src="{% static 'img/slider/slide1.jpg' %}" class="d-block w-100" alt=""&gt;
                      &lt;div class="carousel-caption"&gt;
                         &lt;h5&gt;First Slide Caption&lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="carousel-item" data-interval="2000"&gt;
                      &lt;img src="{% static 'img/slider/slide2.png' %}" class="d-block w-100" alt=""&gt;
                      &lt;div class="carousel-caption"&gt;
                         &lt;h5&gt;Second Slide Caption&lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;a class="carousel-control-prev" href="#carouselCaptions" role="button" data-slide="prev"&gt;
                  &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
              &lt;/a&gt;
              &lt;a class="carousel-control-next" href="#carouselCaptions" role="button" data-slide="next"&gt;
                  &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Next&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Your kind help is really appreciated.</p>