Media query to shrink Bootstrap carousel - html

Question

I am using Bootstrap version 4.0.0-beta and I am using the carousel function. I have configured it perfectly as to how I need it when I view it on my monitor. (1920 x 1200) but would like to change it's height depending on the users monitor, for example 1920 x 1080. I have given my Carousel a height of 32rem but would like to decrease that size if a user is on a smaller screen like I said. I believe a media query is what I need but I have tried and can't figure it out. Can anyone shine some light on this please?
Thanks.

Answer 1

Managed to solve it on my own. Just used this.
#media screen and (max-height: 1000px) {
.carousel-item {
height: 24rem;
}}

Answer 2

Please try the sample below and let me know if its worked.
.img-responsive,
.thumbnail>img,
.thumbnail a>img,
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
display: block;
width: 100%;
height: auto;
}
.carousel-inner {
border-radius: 15px;
}
.carousel-caption {
background-color: rgba(0, 0, 0, .5);
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding: 0 0 10px 25px;
color: #fff;
text-align: left;
}
.carousel-indicators {
position: absolute;
bottom: 0;
right: 0;
left: 0;
width: 100%;
z-index: 15;
margin: 0;
padding: 0 25px 25px 0;
text-align: right;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.carousel-containers {
padding: 10px 0;
}
.carousel-containers {
background-color: #fff;
color: #555;
}
#media screen and (min-width: 768px) {
.carousel-containers {
padding: 1.5em 0;
}
}
#media screen and (min-width: 992px) {
.container {
max-width: 930px;
}
}
<div class="carousel-containers">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>