There seems to be an issue with overlapping text and images when zooming the page. I have included a screenshot for reference, please take a look and provide a solution. Thank you in advance.
Here is the CSS code causing the overlap:
.Pad{
padding: 60px 0px;
margin-top: -300px;
}
body {
margin: 0;
}
.outer-div-for-the-imgae-icon{position:relative; display:block; height:300px; width:300px; }
.outer-div-for-the-imgae-icon img{height:300px; width:300px; object-fit:cover;}
.outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px;}
This is the HTML code contributing to the issue:
<div class="col-12 col-12 p-0">
<div class="col-6 float-left">
<div class="outer-div-for-the-imgae-icon">
<app-image [imagesrc]="imagePath" style="width: 190px;max-height: 190px;clip-path: square(25px at center);"
class="d-none d-sm-block" alt="..."></app-image>
<i (click)="inputFile.click()" style="color : white;left: 180px;
position: absolute; top: -5px; padding: 3px; background-color: rgb(0, 195, 255);
border-radius: 50%;font-size: 12px;"
class="fa fa-pencil fa-lg" aria-hidden="true"></i>
</div>
<div class="col-6 Pad float-right">
<div class="col-sm ">
<span class="name">
<b style="color: rgb(25,25,112); font-size : 15px ">{{myprofile?.FirstName}}
{{myprofile?.LastName}}</b>
</span>
</div>
<div class="col-sm">
<span class="name">
<p>{{myprofile?.Role}}</p>
</span>
</div>
<div class="col-sm">
<span class="name">
<p>{{myprofile?.Phone}} {{myprofile?.UserName}}</p>
</span>
</div>
</div>
</div>