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
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.
That is what I did originally, but it had the same problem, which is why I tried adding those classes back in.
yeah it looks like there are several edits here, which I understand why you made them, it should be possible
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?
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?
only other difference I see is the ratio and fill that you changed, maybe on mobile change those back to the default settings?
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
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
yeah, they are fairly large. compressed to webp but still ~429 x 330px depending on the logo
hmm yeah I vaguely remember this issue with another Lumer...wish I had Mike Ross memory...hmmmm
okay cool, finally able to replicate and its the images, so now I can actually troubleshoot effectively!
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
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.
Got it working and looking cute again! Thanks for all the help! I would have been pulling my hair out for hours 🫠
snakesxladders.com
