Recommended approach for building responsive vertical timeline?

Hi, I want to make a responsive vertical timeline like this:

My specific questions are:

  • How do I make a vertical line? Which html element
  • How should I do the layout for responsive design? Should I use a unordered list, flex system, or grid system?
  • How do I attach circles to the vertical line? Which html element?
  • How do I alternate which side the timeline cards appear on?

Here’s what I experimented with:

  • using a absolute positioned span element and doing css transformations to make it veritcal
  • using a flex box with flex-direction column and then applying :nth-child(odd/even) to align the cards left/right
  • switching to a grid system and applying grid-start to make the left and right cards start in a different column
  • attempted to position a span element styled as a circle on the vertical line (I couldn’t figure this out)
  • attempted to position a span element styled as a triangle on the end of the card, like a smartphone text-message appears (I couldn’t figure this out).

Any advice on how to build a responsive vertical timeline would be greatly appreciated!

Welcome back, @colinsteidtmann

I found a site with a lot of examples of vertical timelines. They also have CodePen demos of each. You could study the source code of a few of these. Number 4 looks pretty similar to your screen shot. It uses absolutely positioned items.
If a CodePen example uses a preprocessor like SASS and you’re not familiar with it, you can click the down arrow on the top right of the CSS panel and select “View Compiled CSS”.

Have a nice day,
Michael