Hey guys! What should be the correct way to edit a marquee logo bar? So I deleted away two logos from Logo 3 template because there's only so many we have for now. But with that I seem to screw up the animation and now there is a gap in between. The gap between each logo doesn't seem to be equal too probably because the logo size of each is different? What width and height should I crop each logo into? This is the preview link of my site: https://preview.webflow.com/preview/vittori-design?utm_medium=preview_link&utm_source=[鈥n&preview=98beef00c357c4c781573538e3886455&workflow=preview I would like to learn the proper way to edit marquee logo bar so the animation works every time no matter how many logos we have. Thank you!
Hazel L. I actually have a loom video on exactly this. https://relume.notion.site/Customizing-Logo-3-40339077145f4bcf964676eb4e5e7e2b?source=copy_link If you're still finding some issues with this, I've found that using just vanilla CSS tends to have more consistent results. Keep in mind that a marquee definitely has its limits but its based on how long a user will be sitting there starring and scrolling logos - not a technical limitation, but just a UX consideration.
Thank you. So what if I want to reduce the numbers of logo rather than adding more? By default you have 8 but I only need 6.
I have to reduce both the grid and delete the image wrapper on the sidebar?
I'm a bit confused though. You mentioned that it depends on how many columns we have and the width of it. We have 8 columns each is 12.5REM, that's only 100? How did we come to 112 in the animation?
I believe the gap between the logos yeah?
I'd have to watch the video again its been awhile since I created it but honestly it might not be helpful, I didn't realize you were wanting to reduce the number, so you'd have to adjust all of the math accordingly
but it would honestly make more sense to just use the CSS version instead.
hmm yeah, I walked through the entire equation as well as both adding and removing logo scenarios in that video
sorry what is the CSS version?
Yeah, ok I get it now, it's 1.5 rem gap + 12.5 rem width. But to reduce the number what I want to make sure is I have to delete both the wrapper on the sidebar and the number of grid correct? Both sides have to tally?
correct
I mentioned the CSS version in my original reply above
OK, I will need a little bit of guidance here. How do I use the CSS in this case? Because right now I already adjusted the animation REM to -84 based on the number of columns I have (6 x 14REM), but on big screen it's still have this big gap, it seems to work fine on the laptop screen.
okay, I can record a loom on the CSS version - but will need some time to get it setup so I can make it generic and reuse it for when this comes up again since I've had this come up several times in the future, I should have had this video created already.
hopefully you have other parts of the site to work on for now or?
