With the help of bootstrap, I've created a mobile-responsive image with overlay text and a button that should be centered on the image. However, the text doesn't stay centered when the screen size is reduced. What it's supposed to look like: https://i.sstatic.net/S8k8p.jpg
What it looks like in responsive mode: https://i.sstatic.net/gZTJN.jpg
Here's the HTML code:
<div id="container-a" class="img-content">
<img src="../img/file.large.jpg" class="img-fluid" alt="workout world img" width="1440" height="600">
<span class="text-box-a container px-4 text-center z-2 align-items-center">
<div class="text-box-b">
<h1 class="main-text f-30 f-sm-50 f-md-75 f-xl-75 text-center font-weight-bold animated fadeInUpSmooth" style="font-size:6vw;">Gains are simply one click away!</h1>
<button type="button" class="btn btn-info" style="font-size:3vw;">Ready?</button>
</div>
</span>
</div>
Here's the CSS code:
#container-a img {
position: relative;
display: block;
z-index: 1;
top: 0px;
left: 0px;
padding-bottom: 20px;
}
.img-content {
display: inline;
}
@media screen and (min-width: 601px) {
.text-box-a {
font-size: 80px;
}
}
@media screen and (max-width: 600px) {
.text-box-a {
font-size: 30px;
}
}
.text-box-a {
z-index: 20;
top: 50%;
left: 50%;
overflow: hidden;
position: absolute;
align-items: center !important;
text-align: center !important;
transform: translate(-50%, -50%);
text-shadow: 2px 2px #585858;
}
.text-box-b {
background: rgb(204, 204, 204);
background: rgba(204, 204,204, .1);
}
.img-content .main-text {
z-index: 2;
}