Issues with Banner 16 Display on Mobile Devices

Hey there, running into some issues with banner 16 on mobile. In webflow preview, the animation and spacing look great, but when I check it on my actual mobile devices (ipad & iphone), the top row has some issues. The animation speed has increased, and the spacing between elements is huge. Bottom row is as expected. Any help would be appreciated 🙏 Read only site here

26 comments

Matt J.
·
Kaysha G. I think in your case you might want to delete the hide tablet combo class. In the original component each item was quite a bit longer, so to make the items show up on scroll more quickly, you would hide items and have less items total but still have the same animation cadence if that makes sense. Basically, you can only show so many items in the amount of time and scroll that a user would do on mobile so you will likely need to play around with that a bit.
Kaysha G.
·
That is what I did originally, but it had the same problem, which is why I tried adding those classes back in.
Kaysha G.
·
Just updated it to remove those, and can confirm the issue still persists 😢
Matt J.
·
yeah it looks like there are several edits here, which I understand why you made them, it should be possible
Matt J.
·
can you send the published URL?
Matt J.
·
I have this so far and it seems to act as it should on mobile device for me. https://matts-stellar-site-a6dc0e.webflow.io/ Can you check?
Matt J.
·
its setup almost identically to yours other than the actual images
Kaysha G.
·
https://snakesxladders-staging.webflow.io/
Matt J.
·
yeah wild, yours is wildly different
Kaysha G.
·
Yeah yours seems to work. So weird. I really tried not to change much but something must be off. Do you have a read only link I can steal your version from?
Matt J.
·
https://preview.webflow.com/preview/matts-stellar-site-a6dc0e?utm_medium=preview_link&[…]e&preview=f3db80e55ccfdf3c8e23c0af50968faa&workflow=preview
Matt J.
·
Kaysha G. only other difference I see is the ratio and fill that you changed, maybe on mobile change those back to the default settings?
Matt J.
·
what the settings should be Also looks like max height is set differently per breakpoint which again, I understand why, and it should be fine but you never know
Kaysha G.
·
In the top version, I haven't changed any of the styling, only added the photos and it's still behaving oddly when published vs in preview. Very confused
Matt J.
·
okay so maybe its the images, I see they are very large yeah?
Kaysha G.
·
yeah, they are fairly large. compressed to webp but still ~429 x 330px depending on the logo
Matt J.
·
hmm yeah I vaguely remember this issue with another Lumer...wish I had Mike Ross memory...hmmmm
Matt J.
·
let me see if I can jog my memory on this
🙏1
Matt J.
·
Kaysha G. okay cool, finally able to replicate and its the images, so now I can actually troubleshoot effectively!
🙌1
Matt J.
·
got it
Matt J.
·
Remove the background from banner16_image-wrapper - thats a bug and we should remove that from the component. Add a max-width of 6rem to banner16_image-wrapper
Matt J.
·
you may need to play around with the interaction
Matt J.
·
I wouldn't necessarily mess with the interaction itself - just this smoothing setting. If you do need/want to play around with that interaction I would duplicate it and only check the box for Phone Portrait.
Kaysha G.
·
Thank you that's super helpful! I'll mess about with it 🙂
Kaysha G.
·
Got it working and looking cute again! Thanks for all the help! I would have been pulling my hair out for hours 🫠 snakesxladders.com
Matt J.
·
woohoo! Awesome website by the way - great job!