I have created a sample button and included a jsfiddle link to showcase the code. Due to the font properties of the specific font I'm using, I had to adjust the padding values differently for the top and bottom of the text to achieve a vertically centered button. Everything looks good on my desktop and in various device simulators like Visual Studio Code's simulator.
However, when checking it on an actual mobile device, the text is not aligned vertically center and I can't seem to pinpoint the issue. I've tested it on Chrome, Firefox, and Safari, all resulting in the same misalignment as shown in this fiddle.
Here's how the button appears on desktop:
https://i.stack.imgur.com/5HEyi.jpg
And here's how it looks on my iPhone:
https://i.stack.imgur.com/mzJi0.jpg
https://jsfiddle.net/astombaugh/c4yesf97/15/
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
.myBtn {
background-color: #cc1818;
border: 1px solid black;
border-collapse: collapse;
width: 100%;
height: auto;
display: block;
margin: 0rem auto 0.3125rem auto;
cursor: pointer;
box-shadow: inset 0 0 0 0 black;
transition: ease-out 0.3s;
}
.myBtnTxt {
font-family: 'Oswald', Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 500;
color: white;
padding: 0.6875rem 0rem 0.375rem 0rem;
margin: 0rem auto 0rem auto;
text-align: center;
text-decoration: none;
font-size: 1.2em;
line-height: normal;
word-spacing: normal;
cursor: pointer;
}<a class="myBtn" style="text-decoration: none;" href="">
<div class="myBtnTxt">Find Out More</div>
</a>
<a class="myBtn" style="text-decoration: none;" href="">
<div class="myBtnTxt">Find Out More</div>
</a>I'm struggling to understand why the mobile phone is interpreting the padding differently compared to what I see on site or in simulators. Is there something obvious that I am missing here? The screenshots are from the live site with the Oswald font, but even with fallback fonts, the issue remains. Just pointing that out in case anyone opens the fiddle on their phone and notices different fonts.