Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
TonyN

Need this CSS script to be mobile responsive please

Question

Posted (edited)

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;
}

Edited by Lystnr

Share this post


Link to post

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...