I am currently experiencing a challenge with adjusting the size of a box for mobile devices using Bootstrap. The layout consists of three boxes, where numbers 1 and 2 are images and number 3 contains text. Here is how it appears: view
However, when the screen is resized to a mobile size, issue arises as box number 3 ends up being either taller or shorter than box number 2 in some devices. This can be seen here: error
The desired output is for box number 3 to match the height of box number 2, as shown here: desired output
I have attempted setting max height and min height properties for box 3 but this solution does not provide consistent results across all devices.
HTML:
<section id="carousel-section">
<div class="container-fluid">
<div class="row feature">
<div class="col-lg-8 col-xl-8 col-md-12 col-xs-12 col-sm-12 ">
<div class="carousel-margin">
<div id="myCarousel" class="carousel1 slide container-carousel" data-
ride="carousel1">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/dragon_hunter_pic.png" alt="dragon_hunter_pic"
id="mainImage1" >
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-xl-4 col-md-5 col-xs-5 col-sm-5 ">
<div class="women-margin">
<img src="images/women_3.png" alt="live" id="women-eyes1" >
</div>
</div>
<div class="col-lg-4 col-xl-4 col-md-7 col-xs-7 col-sm-7 ">
<div class="yellow-box">
<h2 id="change_h2">THE DRAGON HUNTER</h2>
<br/>
<p id="change_p"> Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolor aliqua. </p>
</div>
</div>
</div>
</div>
</section>
This section contains the problematic box, which is box number 3:
<div class="yellow-box">
CSS:
.yellow-box{
position: relative;
display: block;
background-repeat: no-repeat;
background-size: cover;
min-height: 204px;
margin-top:150px;
background-color: #e6ff00;
margin-left: -15px;
margin-right: -15px;
}
This corresponds to box number 2:
.women-margin{
margin: -1px -15px -2px -17px;
position: relative;
display: block;
padding-right: 0;
}