Infinite carousel breaks everything else in mobile

Design help General
1

I have created an infinite carousel. It works well on the web, but it breaks everything else in mobile.

image
image472×885 83.8 KB

Carousel div is set on flex and I think this is why it stretches everything out. How to fix that?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hi there,

Horizontal scroll animations can be tricky on mobile devices since they’re primarily designed for desktop scrolling. Here’s how to optimize them for mobile viewing:

  1. Deselect mobile devices in the Track Section’s interaction settings (Tablet, Phone landscape, and Phone portrait breakpoints)
  2. For mobile optimization, adjust the Track Section’s height to Auto in the Tablet breakpoint
  3. Set the Camera Div block’s width and height to Auto
  4. Change the Frame Div block’s Flexbox direction from Horizontal to Vertical
  5. Adjust the Item Div block’s style properties to fit your vertical scroll design

These changes made on the Tablet breakpoint will cascade down to mobile breakpoints while preserving the desktop experience.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

I am still in search of an answer. I sort of a found a workaround to fix the mobile issue, but I still have the same problem. I have 2 divs in one container. When I add the carousel to the left one then it totally stretches itself out and comporesses the right div. Here is an example where the the picture in the right div is so small that you can even see it:

image
image1306×994 89.3 KB

I have the same issue when resizing the window: some parts go smaller, other stay in the same size.

Is there a fix or what am I missing?

1 Like