It seems like my button text appears fine on Safari, but in Google Chrome the issue arises. When you first arrive at the button, everything looks okay. However, after navigating through more posts and encountering the load more button again, the text gets all messed up – and it's only happening in Google Chrome.
The first encounter with the load more button... https://i.stack.imgur.com/mtB3c.png
Upon a second encounter with the load more button...
https://i.stack.imgur.com/6KVZU.png
Here is my CSS snippet... I've attempted to add width, but it fixes one problem while creating another as the button loses its center alignment.
.elm-wrapper {
margin: 1em auto;
text-align: center;
}
.elm-button {
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
background-color: #ffffff;
text-shadow: none;
box-shadow: none;
border: none;
padding-top: 45px;
padding-bottom: 25px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 19px;
color: #848484;
outline: none;
}
.elm-button.ajax-inactive {
display: none;
}
.elm-button.is-loading .elm-button-text {
display: none;
}
.elm-loading-anim {
display: none;
}
.elm-button.is-loading .elm-loading-anim {
display: block;
}
.elm-loading-icon {
width: 1.5em;
height: 1.5em;
}
.elm-button:not(.is-loading)::before {
content: "v";
font-size:11px;
float:right;
margin:6px 0 0 16px;
font-family: 'Days One', sans-serif;
}