Jordy_TheShop Posted June 7, 2021 Share Posted June 7, 2021 (edited) Hi, I'm having trouble with a rotating text marquee on my site. I've successfully managed to put the marquee in using a code block, however I have site overflow and not sure how to fix it. I've tried fiddling the max width but no luck. Any help would be much appreciated. HTML: <h3> <div class="marquee"> <div class="track"> <div class="content"> SEO • MARKETING • WEB DESIGN • SOCIAL MEDIA MANAGEMENT • CONTENT CREATION • EMAIL • WEB DEV • PHOTOGRAPHY • VIDEO • SEO • MARKETING • WEB DESIGN • SOCIAL MEDIA MANAGEMENT • CONTENT CREATION • EMAIL • WEB DEV • PHOTOGRAPHY • VIDEO</div> CSS: //MARQUEE START// .marquee { position: center; width: 150vw; max-width: none; height: 40px; padding-top: 3px !important; overflow-x: hidden; } .track { position: absolute; white-space: nowrap; will-change: transform; animation: marquee 32s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } //MARQUEE END// Edited June 26, 2021 by Jordy_TheShop Link to comment
tuanphan Posted June 9, 2021 Share Posted June 9, 2021 Hi. It looks like you solved this? 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
Solution Jordy_TheShop Posted June 26, 2021 Author Solution Share Posted June 26, 2021 Yes I did – I ended up noodling around and the following CSS worked for anyone else needing this effect. //MARQUEE START// .marquee { position: relative; width: 100vw; max-width: 100%; height: 40px; padding-top: 0px !important; overflow: hidden; } .track { position: absolute; white-space: nowrap; will-change: transform; animation: marquee 32s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } //MARQUEE END// Thanks, Jordy 🙂 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment