How to fix responsiveness of animated timeline

Hiya, I’ve created this animated timeline, inspired by something similar I saw a while ago. The timeline works well on desktop however when scaling down to mobile devices it’s all messed up. I want to get rid of the whole timeline animation for mobile and just have the information displayed in static boxes. However because of how I’ve setup the layout, it’s messing up whatever I try. Could anyone point me in the right direction please?

I’ve attached a screenshot here to what I mean:

Much appreciated!


Here is my site Read-Only: Webflow - MBA 2.0

Hi @LucaB7

You could change the orientation of 3 divs to center it on mobile landscape.

  1. On mission-space-block - Set display: none
  2. On timeline_item - Display: vertical, align and justify: center
  3. On timeline_content - Width: 100%

Then run a test on the live site. This will allow you to keep everything but centering items on the screen.

-G.J.

1 Like

This worked perfectly! Thanks, I appreciate it

No problem, have a great weekend!

1 Like