Guest John2141 Posted November 15, 2019 Share Posted November 15, 2019 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; } } Link to comment
Guest John2141 Posted November 15, 2019 Share Posted November 15, 2019 Also. How do I center it on the page? Thanks! Link to comment
tuanphan Posted November 15, 2019 Share Posted November 15, 2019 Wrap all code in this code @media screen and (min-width:641px) { paste all code here } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Guest John2141 Posted November 15, 2019 Share Posted November 15, 2019 Alternatively, how would I make the text smaller on mobile? Link to comment
tuanphan Posted November 15, 2019 Share Posted November 15, 2019 Just now, John2141 said: Alternatively, how would I make the text smaller on mobile? Which text? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Guest John2141 Posted November 15, 2019 Share Posted November 15, 2019 Got it thanks. If I can get it to display correctly on mobile I would leave it. Link to comment
Guest John2141 Posted November 15, 2019 Share Posted November 15, 2019 The text that is used in the code to display on the page. Link to comment
tuanphan Posted November 15, 2019 Share Posted November 15, 2019 8 minutes ago, John2141 said: The text that is used in the code to display on the page. Which text? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Guest John2141 Posted November 16, 2019 Share Posted November 16, 2019 Here's the html. I was talking about the words under each. Example- action Link to comment
Guest John2141 Posted November 16, 2019 Share Posted November 16, 2019 Obviously I don't know much about code. I am getting these from a source I found online. Link to comment
Guest John2141 Posted November 16, 2019 Share Posted November 16, 2019 <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> Link to comment
Guest John2141 Posted November 16, 2019 Share Posted November 16, 2019 Sorry. I thought I pasted it. Link to comment
Guest John2141 Posted November 16, 2019 Share Posted November 16, 2019 If you need to see it you can go to my site at johnetterleebooks.com Link to comment
Guest John2141 Posted November 16, 2019 Share Posted November 16, 2019 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. Link to comment
Guest John2141 Posted November 16, 2019 Share Posted November 16, 2019 It didn't work. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.