Guest Posted December 18, 2020 Share Posted December 18, 2020 Site URL: https://tomato-bronze-atwb.squarespace.com Hey everyone. I added this text animation to my site and its working properly however it prevents me from editing anything else on the page. I have to delete the code block in order to make any other changes to my site. Heres both the HTML and CSS code I added, if anyone sees the problem I would really appreciate some help! Thanks! P.s password to my site is 2021 if you need it HTML: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="content"> <div class="slider-wrapper"> MODERN WEB DESIGNS FOR <div class="slider"> <div class="slider-text1">ORIGINAL </div> <div class="slider-text2">INNOVATIVE</div> <div class="slider-text3"> CREATIVE</div> </div> <div class="slider-text5">ENTREPRENEURS</div> </div> </div> </div> </body> </html> CSS: @media only screen and (min-width: 641px) { .slider-wrapper { font-size: 22px; color: #212a32; font-weight: bold; text-transform: uppercase; display: flex; align-items: center; justify-content: center; } .slider{ height: 45px; padding-left: 5px; padding-right: 5px; overflow: hidden; } .slider div { color:#fff; height: 45px; padding:4px 7px; margin-bottom: 45px; text-align: center; box-sizing: border-box; } .slider-text1 { animation: slide 7s linear infinite; } .slider-text2 { } .slider-text3 { } .slider-text4 { } @keyframes slide { 0% {margin-top:-270px;} 5% {margin-top:-180px;} 33% {margin-top:-180px;} 38% {margin-top:-90px;} 66% {margin-top:-90px;} 71%{margin-top:0px;} 100% {margin-top:0px;} } } Link to comment
creedon Posted December 19, 2020 Share Posted December 19, 2020 For the HTML I think you will only need the following. <div class="slider-wrapper"> MODERN WEB DESIGNS FOR <div class="slider"> <div class="slider-text1">ORIGINAL </div> <div class="slider-text2">INNOVATIVE</div> <div class="slider-text3"> CREATIVE</div> </div> <div class="slider-text5">ENTREPRENEURS</div> </div> I haven't tested this but let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
tuanphan Posted December 22, 2020 Share Posted December 22, 2020 Have you solved this yet? 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
ValentineM Posted February 23, 2021 Share Posted February 23, 2021 Hey there, I just used this code for my site but the issue is that the animation is only working on desktop view and not on mobile view, any help please? Link to comment
creedon Posted February 24, 2021 Share Posted February 24, 2021 @ValentineM Right. It appears it was designed only for desktop. @media only screen and ( min-width : 641px ) If you want to give it a go on mobile then when you copy the CSS from the OP's post then you will want to leave out the first and last lines. @media only screen and (min-width: 641px) { } That removes the desktop only restriction. Also note folks that I updated my suggested modification to the HTML as I think there was a class conflict going on. Again I haven't tested any of this. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ValentineM Posted February 24, 2021 Share Posted February 24, 2021 Ok thanks I will try that. Any idea also on how to add a fourth text slider? Looks like this code is for 3 words only. I tried playing around with it but no success... Thanks! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.