this is simple html code together with bootstrap carousel which have three images to slide , then added an overlay to make carousel caption more attractive ! it works fine on large screen size but on small screen size including mobile phone(smartphones) the height of overlay is increased than the height of carousel !! how to make them have the same height even on a small screen size?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"rel="stylesheet">
<link href="phcoding/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
<title>| Catering Services |</title>
<style>
.overlay {
position: relative;
width: 100%;
min-height:100%;
background-color: #080d15;
opacity: .5;
z-index:1000;
}
.carousel .carousel-item {
height: 500px;
}
.carousel-item img {
position: absolute;
object-fit:cover;
top: 0;
left: 0;
max-height: 100%;
}
.carousel-caption {
position: absolute;
right: 15%;
top: 50%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
z-index:1000
}
</style>
</head>
<body>
<section id="home">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand">Catering</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav ml-auto">
<li class="nav-item-active">
<a class="nav-link justin" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#service">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#sample">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact Us</a></li>
</div>
</ul>
</nav>
</section>
<!---carousel--->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_03_hd_pictures_167556.jpg" alt="First slide">
<div class="carousel-caption">
<h5>Bringing the world to your table
</h5>
</div>
</div>
<div class="carousel-item">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_05_hd_picture_167554.jpg" alt="Second slide">
<div class="carousel-caption">
<h5>Creating memories that last a lifetime</h5>
</div>
</div>
<div class="carousel-item">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/fruit_juice_and_fruit_stock_photo_167154.jpg" alt="Third slide">
<div class="carousel-caption">
<h5>Filling every occasion with great food and service.</h5>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="jsplugins/js/jquery.min.js"></script>
<script src="jsplugins/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>