CODEWITHSUNDEEP
htmlcss
Andi
Andi

Reputation: 2992

Inconsistent padding on buttons between desktop and mobile devices

I have built out an example button for this and attached a jsfiddle with the code to demonstrate. The font properties of this particular font force me to use different values for padding along the top and bottom of the text in order to get an evenly spaced button vertically. This works fine on my desktop view and I've simulated it on several device simulation websites as well as Visual Studio Codes device simulator and see no issues.

However, when viewed on an actual mobile device, the text is not centered vertically and I can't figure out why. I've tried Chrome, Firefox, and Safari and they all produce the same result using this fiddle and code.

Here's the desktop view of the button:

enter image description here

Here's the mobile view of the button from my iPhone:

enter image description here

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 can't seem to figure out what might be causing the phone to interpret the padding differently than what the site and device simulators are seeing. Is there something obvious I'm not catching here? The mobile view is from the actual site it's live on so if you don't have the Oswald font you may not see it the same which is why I provided the screenshots. It still happens with the fallback fonts though. Just wanted to make that clear in case anybody opens the fiddle on their phone and wonders why the fonts are different.

Upvotes: 1

Views: 756

Answers (1)

Anna_B
Anna_B

Reputation: 890

Browsers are weird. But there are cool tools like that: https://seek-oss.github.io/capsize/

With it, you can just remove the spaces around. There are also similar tools.

Upvotes: 1

Related Questions