I am currently working on a small webpage and encountering an issue with responsiveness when scaling the browser window in and out. The design looks perfect at 320x568 resolution, but when I scale it down, a black box (`.transbox`) overlaps the image, which is not desired.
https://i.sstatic.net/nZe5u.png
Here is how it looks after scaling down:
https://i.sstatic.net/o2oCr.png
Instead of using CSS media queries, I want to achieve the responsive design using only CSS. Below are my current HTML and CSS snippets:
.masthead {
height: 20vh;
min-height: 370px;
background-image: url("http://lorempixel.com/1920/1080");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
div.transbox {
margin: 30px;
background-color: rgba(0, 0, 0, 0.6);
min-height: 300px;
}
div.transbox p {
font-weight: bold;
color: white;
}
.transbox h1 {
color: white;
}<header className="masthead">
<div className="container">
<div className="row align-items-center">
<div className="col-12 text-center">
<div class="transbox">
<h1 className="font-weight-light">
All your Escort needs within a single place!
</h1>
<p className="lead">
Find the best set of escort services in Sri Lanka
</p>
</div>
</div>
</div>
</div>
</header>Is there a way, using either Bootstrap classes or pure CSS, to prevent the black box from overlapping the photo when scaling the browser window?