I am facing an issue with the alignment of button text. It appears to be off-center on certain screen sizes, as shown in the images below.
On my iPad, it looks fine:
https://i.sstatic.net/agDR3.png
However, on my iPhone, the positioning is not centered:
https://i.sstatic.net/RorNj.png
HTML Code:
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div @fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay">
<button routerLink="/test"
class="btn btn-success fill-container testButton">
TEST
</button>
</div>
</div>
</div>
</div>
CSS Styles:
.img-wrapper {
position: relative;
}
.img-overlay {
position: absolute;
bottom: 31%;
left: 13.5%;
width: 34%;
height: 4%;
background-color: red;
}
.testButton {
font-size: 3vw;
line-height: 20px;
}
.fill-container {
width: 100%;
height: 100%;
}
If you have any suggestions on how I can correct this alignment issue, please let me know.
Thank you!