It's functional on Chrome desktop
However, it has issues on Safari iOS
Here is the CSS code snippet
.button {
border: 1px outset $color3;
background: $color1;
color: $color4;
font-size: 80%; // Reduced size due to uppercase
text-transform: uppercase;
display: inline;
margin-left: 5px;
margin-right: 5px;
}
I attempted adjusting font-size: smaller, 0.8em, etc., with no success. 50% or 0.5em seems suitable on iPhones but too tiny on larger screens. The text-transform property had no impact. Applying padding: 1px; didn't resolve the issue either.