Table of contents
Last week, I was given the task of creating a responsive horizontal timeline for a client. I thought, “Easy, I’ll just find a CodePen real quick and get to work customizing.” But alas, after an hour or so of searching and fidgeting with Pens, I realized I’d have to create my own solution. Most of the responsive solutions out there were vertical timelines that stayed vertical on both desktop and larger screens. Although vertical timelines are more intuitive, my client was set on having a “horizontal timeline that scrolls”.
So I gathered some horizontal solutions to use for resources for the bits I was a little fuzzy about: positioning of the elements and creating the line the elements would be positioned around. I’ve always struggled a bit with creating responsive solutions for elements that used absolute positioning. It can be tricky to move all those elements the way you want and in a way that looks good on all devices. This was a great exercise to practice absolute and relative positioning and I encourage anyone reading this to take this timeline as a base and make it better! It’s a great way to improve your skills.
Tips & Tricks
Here are some tips and tricks I learned while creating this timeline, but I won’t blame you if you skip straight to the solution. 😏
Width: fit-content - When I was writing my code I was riding high on positioning my elements the way I wanted, but for the life of me, I couldn’t figure out why my elements were getting cut off. I thought I had everything I needed: a max-width set on the container, overflow-x:auto, overflow-y: hidden, and white-sapce: nowrap. But nope, my timeline looked like this:
Thankfully, some kind soul on StackOverflow introduced me to width:fit-content and changed my life. Basically, fit-content combined with our max-width in the parent makes the child div fit nicely within its container, meaning no weird cut-offs!
Mastering Positioning Takes Time- I usually tend to only have a couple absolute positioned elements for a design at a time. Dealing with this many and moving them around for mobile was fun, but challenging. I didn't think I could create something like this from scratch and even though the solution isn't perfect, I'm happy with it for now. The code you see in the solution is my second iteration, I completely scrapped my first take. So if you're a code newbie out there, don't give up, you may surprise yourself with what you can create if you just keep trying (with plenty of brain breaks).
I still have progress to make, but that's the beauty of being a web dev, the learning never stops...and I love it. 💪
Solution
Improvements
Currently, on the even numbered events, if you have too much text, the event bubble might go out of the viewport. If you have too little text, there will be a larger gap to the timeline compared to other even numbered events. Ideally, I’d like the solution to look something like this:
I played around with placement and styles but couldn’t quite achieve this yet unless I add inline styles to those elements I want to position. I haven’t found a dynamic solution yet.
I’d also like to add JavaScript to this timeline at some point. Instead of having the traditional scrollbar, I would like to implement arrows with a smooth animation that guide you along the timeline.
I hope you found this timeline useful and are able to use it or pieces of it in your own project. Thanks for reading!! ✨