EdG

Perfect! Thanks so much!

Hey, yes still struggling with this. It just seems to be on some mobiles (older iPhones for example) where the text rotation is loading slowly or not timing up correctly. Any ideas? Thanks!

Managed to fix it, thanks.

Hi tuanphan, any chance you'd be able to help me with the css to use the desktop menu on Tablet? Struggling to find the code! Thank you!

Hi Leopold, thanks for getting back to me. The code doesn't work though unfortunately. The padding is still different on Chrome and Safari. Any other suggestions?

Site URL: https://www.2pt5.co.uk Hi, I have a code block with rotating text on my home page (2pt5.co.uk) Having problems with the padding being different on Chrome and Safari. No idea how to fix this! If anyone can help it would be greatly appreciated!

Site URL: https://www.2pt5.co.uk Hi, Having problems getting an animated element (rotating text) to load properly, particularly on mobile devices. If you check my site homepage (2pt5.co.uk) you'll see the background colour changes every 2 seconds, and so does a line of text. The two elements should be synced up to the same timing, but on mobile devices (and sometimes desktop depending on the browser) the text seems to go a bit wrong and the timings are off. Anyone have any idea how to fix this or improve it at least? Thank you in advance for anyone who can take the time to help me out here. I'll place the code I'm using below. I'm not a coder so it's all a bit hacky. (Note, this is being put into the custom css window in the design section. There is also an html code block element containing the text itself.) .rw-wrapper{ width: 100%; position: center; margin: auto; font-family: 'Helvetica neue'; overflow: hidden; } .rw-words{ width: 100%; display: flex!important; justify-content: center!important; margin: auto; overflow: hidden; } .rw-words span{ position: absolute; opacity: 0; overflow: hidden; margin: auto; width: 100%; color: #ffffff; padding: 0px 0px!important; } .rw-words-1 span{ animation: rotateWordsFirst 12s infinite 0s; padding-left: 0px!important; } @keyframes rotateWordsFirst { 0% { opacity: 1; height: 70px; } 16.6% { opacity: 1; height: 70px; } 16.7% { opacity: 0; height: 70px; } 100% { opacity: 0; height: 70px; } } .rw-words-2 span{ animation: rotateWordsSecond 12s infinite 0s; animation-delay: 2s; padding-left: 0px!important; } @keyframes rotateWordsSecond { 0% { opacity: 1; height: 70px; } 16.6% { opacity: 1; height: 70px; } 16.7% { opacity: 0; height: 70px; } 100% { opacity: 0; height: 70px; } } .rw-words-3 span{ animation: rotateWordsThird 12s infinite 0s; animation-delay: 4s; padding-left: 0px!important; } @keyframes rotateWordsThird { 0% { opacity: 1; height: 70px; } 16.6% { opacity: 1; height: 70px; } 16.7% { opacity: 0; height: 70px; } 100% { opacity: 0; height: 70px; } } .rw-words-4 span{ animation: rotateWordsFourth 12s infinite 0s; animation-delay: 6s; padding-left: 0px!important; } @keyframes rotateWordsFourth { 0% { opacity: 1; height: 70px; } 16.6% { opacity: 1; height: 70px; } 16.7% { opacity: 0; height: 70px; } 100% { opacity: 0; height: 70px; } } .rw-words-5 span{ animation: rotateWordsFifth 12s infinite 0s; animation-delay: 8s; padding-left: 0px!important; } @keyframes rotateWordsFifth { 0% { opacity: 1; height: 70px; } 16.6% { opacity: 1; height: 70px; } 16.7% { opacity: 0; height: 70px; } 100% { opacity: 0; height: 70px; } } .rw-words-6 span{ animation: rotateWordsSixth 12s infinite 0s; animation-delay: 10s; padding-left: 0px!important; } @keyframes rotateWordsSixth { 0% { opacity: 1; height: 70px; } 16.6% { opacity: 1; height: 70px; } 16.7% { opacity: 0; height: 70px; } 100% { opacity: 0; height: 70px; } }

And yes, I’d definitely like to try having the two menu items show on mobile as well. Thanks again for all your help

Ah that’s a great tip, thanks again!

Brilliant, that did the trick, thanks so much!

Site URL: https://www.2pt5.co.uk Hi All, I've been tearing my hair out trying to fix an animated text element that I can't quite get to sit properly on the page. website: 2pt5.co.uk password: dontgiveupthedayjob You'll see the animated text in the bottom middle half of the screen. It's never exactly in the centre, and I don't understand why. Also, the padding of the text from the bottom of the coloured background is changing with different window sizes (mobile/ipad) etc. and I'd like it to be fixed. If you look at the 'Work' page on the site you'll see some static text that will give you an indication as to the position I'd like the animated text on the home page to be in. If anyone has the time to help, I'd be super grateful! The code I've used to position the text is as follows: @media screen and (max-width:2500px) { div#block-yui_3_17_2_1_1602202900295_3511 { padding-bottom: 62px!important; } } .rw-wrapper{ width: 85%; position: center; margin: auto; font-family: 'Helvetica neue'; overflow: hidden; } .rw-words{ width: 85%; display: inline; position: center; margin: auto; overflow: hidden; } .rw-words span{ position: absolute; opacity: 0; overflow: hidden; margin: auto; width: 85%; color: #ffffff; }