I attempted to create a sentence where specific words are animated (rotated through) - initially it seemed to be working fine. However, upon checking the site on my mobile device, I discovered an issue. When accessing the page from a desktop ( including within dev tools), the animated text appears in the proper size. But when viewed on a mobile device (iPhone), the text shrinks significantly
Bootstrap is also being utilized on the page and I suspected that something might have been overridden. Despite removing most of the bootstrap classes, the problem persists.
.animated span {
color: #007bff;
font-size: 0;
opacity: 0;
-ms-animation: topToBottom 10s infinite;
-webkit-animation: topToBottom 10s infinite;
animation: topToBottom 10s infinite;
}
.animated span:nth-child(2) {
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated span:nth-child(3) {
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated span:nth-child(4) {
-ms-animation-delay: 6s;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.animated span:nth-child(5) {
-ms-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
@-webkit-keyframes topToBottom {
0%,
20% {
font-size: 2.5rem;
opacity: 1;
}
/* visible for 1s */
20.01%,
100% {
opacity: 0;
font-size: 0rem;
}<h1 class=" cover-heading animated">TribePulse replaces <br />
<span>status updates</span>
<span>engagement surveys</span>
<span>progress reports</span>
<span>status meetings</span>
<span>EoD emails</span>
</h1>Demo on glitch: Upon viewing it on a desktop, all the blue text displays at the correct size. Nevertheless, when seen on a mobile device, the animated text becomes miniscule.