John2141 0 Posted November 15 I have a css code I added. How do I get this to only display on desktop and tablet, but not phone? Here's the code. // 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: #ffff00; } // 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: #ffff00; } // 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: #ffff00; } // 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: #ffff00; } // 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: #ffff00; } // Rotating Words // .rotating-words{ display: inline; text-indent: 10px; } .rotating-words-1 span{ position: absolute; opacity: 0; overflow: hidden; color: #6b969d; -webkit-animation: rotateWord 18s linear infinite 0s; -moz-animation: rotateWord 18s linear infinite 0s; -o-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } // Rotating Animation Keys // @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } Share this post Link to post
0 John2141 0 Posted November 15 Also. How do I center it on the page? Thanks! Share this post Link to post
0 tuanphan 6,110 Posted November 15 Wrap all code in this code @media screen and (min-width:641px) { paste all code here } Send me a message if you have any questions | View my service if you need more support View 4200+ Custom Code for Squarespace How to Setup Password & Share Site URL How to find Page ID Share this post Link to post
0 John2141 0 Posted November 15 Alternatively, how would I make the text smaller on mobile? Share this post Link to post
0 tuanphan 6,110 Posted November 15 Just now, John2141 said: Alternatively, how would I make the text smaller on mobile? Which text? Send me a message if you have any questions | View my service if you need more support View 4200+ Custom Code for Squarespace How to Setup Password & Share Site URL How to find Page ID Share this post Link to post
0 John2141 0 Posted November 15 Got it thanks. If I can get it to display correctly on mobile I would leave it. Share this post Link to post
0 John2141 0 Posted November 15 The text that is used in the code to display on the page. Share this post Link to post
0 tuanphan 6,110 Posted November 15 8 minutes ago, John2141 said: The text that is used in the code to display on the page. Which text? Send me a message if you have any questions | View my service if you need more support View 4200+ Custom Code for Squarespace How to Setup Password & Share Site URL How to find Page ID Share this post Link to post
0 John2141 0 Posted November 16 Here's the html. I was talking about the words under each. Example- action Share this post Link to post
0 John2141 0 Posted November 16 Obviously I don't know much about code. I am getting these from a source I found online. Share this post Link to post
0 John2141 0 Posted November 16 <h1> <span>THE COLD STORM<br/></span> <div class="rotating-words rotating-words-1"> <span>a pulsating ride of</span> <span>action</span> <span>suspense</span> <span>combat</span> <span>It's only the beginning.</span> </div> </h1> Share this post Link to post
0 John2141 0 Posted November 16 If you need to see it you can go to my site at johnetterleebooks.com Share this post Link to post
0 John2141 0 Posted November 16 The only way I can see being able to keep it on mobile is if i could make it smaller. It just looks crammed as is. Share this post Link to post
I have a css code I added. How do I get this to only display on desktop and tablet, but not phone? Here's the code.
// 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: #ffff00;
}
// 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: #ffff00;
}
// 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: #ffff00;
}
// 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: #ffff00;
}
// 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: #ffff00;
}
// Rotating Words //
.rotating-words{
display: inline;
text-indent: 10px;
}
.rotating-words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 18s linear infinite 0s;
-moz-animation: rotateWord 18s linear infinite 0s;
-o-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
// Rotating Animation Keys //
@-webkit-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-moz-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -moz-transform: translateY(-30px); }
5% { opacity: 1; -moz-transform: translateY(0px);}
17% { opacity: 1; -moz-transform: translateY(0px); }
20% { opacity: 0; -moz-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-o-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -o-transform: translateY(-30px); }
5% { opacity: 1; -o-transform: translateY(0px);}
17% { opacity: 1; -o-transform: translateY(0px); }
20% { opacity: 0; -o-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -ms-transform: translateY(-30px); }
5% { opacity: 1; -ms-transform: translateY(0px);}
17% { opacity: 1; -ms-transform: translateY(0px); }
20% { opacity: 0; -ms-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; transform: translateY(-30px); }
5% { opacity: 1; transform: translateY(0px);}
17% { opacity: 1; transform: translateY(0px); }
20% { opacity: 0; transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
Share this post
Link to post