My challenge is aligning text over an image so that they move together when zooming in or out. However, I am facing difficulties as the text and image seem to move in different directions. I have attempted using media queries and adjusting the positions of the containers with no success.
<div class="container-fluid test img-responsive">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="text-center col-md-6 waben">
<img class="wabeeins pull-left img-responsive" src="https://i.ibb.co/f23d7qk/Artboard-1.png"
height="298.39" width="344.56" id="wabeone" alt=wabe1>
<div class="firsttext">
<h1>Test <br> test <br> test!</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@media (min-width: 1700px)
{
.wabeeins{
position: absolute;
margin-top: 3%;
margin-left: -8%;
z-index: 5;
}
.firsttext {
z-index: 10;
position: absolute;
margin-top: 12%;
right: 32%;
font-family: $font;
color: $white;
font-size: 30px;
z-index: 100;
}
}
I experimented without bootstrap and managed to somewhat solve the issue, but I am struggling to achieve the desired outcome with bootstrap.
My goal is to have the text and image move simultaneously in the same direction. Additionally, I aim to create a responsive layout for all resolutions, eliminating the need for individual @media queries (e.g., browser window resizing).