Is there a tutorial on how to create a vertical timeline (with box on the side)? Not too fussed about styling, but more interested in the overall setup and making it responsive to screen sizes (if possible).
I found a few old forum discussions, but the share links are mostly broken. Appreciate if someone can point me to right direction. Thanks.
Hi! Absolutely! I helped out on a similiar case last year, so check this thread out:
@StevenP Funny, I was just reading through your excellent step by step write up. May I ask how you deal with smaller screen sizes? Presumable your setup is not responsive to that.
No, I did not style it in regards of the tablet / mobile queries, but that’s not very hard. You just have to adjust things accordingly to your content. If your boxes don’t contain loads of info, there might be a chance you can just “scale” it down from the desktop mode. If not, setting everything to block so they line up underneath eachother is the way to go!
@StevenP Thanks. I guess if all the blocks stack on top of each other (let’s say for mobile), I need to somehow “flop” the timeline to the left hand side (so the left column div blocks will need to carry a left border). Also the triangles for the left column div blocks will have to “move”.to the left in order to point to the timeline (on the left side now).
Is there a clever way to do this? 
Well, you have to play around with the positioning settings.
Check this out:
https://preview.webflow.com/preview/stevenpersson?preview=c6b8b390a935366fe4d30ba9f8162c02
Go to “Om Mig”-page and scroll down to “Jobb & Utbildning”
Live site is here:
https://www.stevenpersson.com/om
This timeline is responsive and pushes the timeline to the left on mobile queries. Play around with the settings and you’ll find a solution 
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.