I have a timeline and I would like it stay responsive as the content stretches in various screen sizes. How do I do that?

Design help General
1

Hello!

In this part of my project, I’d like to have the timeline (a picture currently) do be always aligned with the heading.
However, if I change the screensize it always moves all over the place.
Does it make more sense to build this image in webflow and if yes, how would I do that?
What’s the best solution for my problem?

Best wishes,
Julian

how it should be:

image
image568×804 56.8 KB

Reality:

image
image616×698 45.9 KB

Here is my site Read-Only: https://preview.webflow.com/preview/octomo-landing-page?utm_medium=preview_link&utm_source=designer&utm_content=octomo-landing-page&preview=9e90aaae4c598004f497fd07251dc9dc&mode=preview
(how to share your site Read-Only link)

2

The line should be part of each step of the timeline. You could use 2 bg images: one gray line that you will set to the left and on repeat on the y axis, and on top of it, one image with the green dot and a white border around it, set to the top left and top, repeat none, adjusted to be aligned with the line.

This way, you can manipulate your list as you want, it will always look good.

3

I am not sure if I understand it correctly! I’ll try on Monday and let you know!
Thanks a lot, Vincent!

4

Hey Vincent,
Quick update: I did what you told me and it worked! Thanks a lot for your input, highly appreciated!

One thing I am still wondering: How do I align the image (ellipse) with the line?

Julian