TonyN Posted April 16, 2020 Share Posted April 16, 2020 Hi I have a CSS script that rotates 6 different words into a code block. The issue is it isn't mobile responsive. I have a strong feeling it is difficult because one of the words that rotates in is too long. So as a suggestion, could someone provide a tweak to this so that it displays in a fixed size in mobile. I can just tweak the size until I can get all the words in. I believe I just need to update my code block info: Here is the code block ------------- <h3> <span>Find</span> <div class="rotating-words rotating-words-1"> <span>Fun.</span> <span>Adventure.</span> <span>Excitement.</span> <span>Inspiration.</span> </div> --------------------------------- CSS ____________ // Rotating Word 1 // .rotating-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #EA1D26; } // Rotating Word 2 // .rotating-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #EA1D26; } // Rotating Word 3 // .rotating-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -o-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #EA1D26; } // Rotating Word 4 // .rotating-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #EA1D26; } // Rotating Word 5 // .rotating-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #EA1D26; } Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.