Seeking a solution for making the letters inside an image responsive without using media queries, only utilizing Bootstrap grid. Currently, when resizing the screen, the letters overlap each other instead of maintaining their proportions. Below is the CSS code used for positioning the text within the image:
.banner{
position: relative;
}
.heading-annual{
position: absolute;
top: 10%;
color: whitesmoke;
left: 7%;
}
.heading-medicine{
position: absolute;
top: 25%;
color: whitesmoke;
left: 7%;
}
.heading-manchester{
position: absolute;
top: 43%;
color: whitesmoke;
left: 7%;
}
.heading-date{
position: absolute;
top: 55%;
color: whitesmoke;
left: 7%;
}<div class="container-fluid px-0">
<div class="row">
<div class="col-md-12 col-lg-12 banner">
<img src="https://rcpmedicine.co.uk/wp-content/uploads/2018/11/new_banner_home.png" height="100%" width="100%" >
</div>
</div>
</div>
<h1 class="heading-annual">RCP annual conference</h1>
<h1 class="heading-medicine">Medicine 2019</h1>
<h4 class="heading-manchester">Manchester Central</h4>
<h4 class="heading-date">25-26 April 2019</h4>