I am facing an issue with my web application.
Explanation: The text displayed on the left side is directly related to the size of the image on the right. I need a solution to make one column completely independent from another.
<section class="section">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-4 col-xs-4 p-4">
<h1>nosfera.app</h1>
<p>Oops, looks like you have wandered into Nosfera's mysterious realm.
<p>But fear not! We will provide royal treatment and bring you into the spotlight, all you need to do is embrace the darkness by clicking on one of the buttons below.
<div class=fields>
<div class=item><a href=/login><button class="btn btn-red">Log in</button></a></div>
<div class=item><a href=/login><button class="btn btn-grey ml-2">Register</button></a></div>
</div>
</div>
<div class="col-md-6 col-xs-4 col-sm-4">
<div class="block"></div>
</div>
</div>
</div>
</section>
.section {
display: grid;
height: 90vh;
align-content: center;
}
.section p {
font-weight: 400;
font-size: 1.2rem;
}
.block {
background:url(../img/block.png);
background-size:contain;
background-repeat:no-repeat;
background-position:center;
width:100%;
height:100%
}