Horizontal Timeline Reference & Review: Getting Sideways

Chris Drinkut
Oct 13, 2016 · 2 min read

So, I found an alternative to the standard layout for a timeline. Perhaps you’ve seen the vertical layout, … well, feast your eyes and experiences on a whole new approach. Let’s test it out.

This particular setup is demoed and downloadable thanks to CodyHouse Check ’em out.

The first thing I did was to review the article, then download the zip file. I uploaded the zip via FTP to my space on the eHost server.

Eureka! The timeline is live on my own server. Time to hack.

I noticed the timeline didn’t have any images in it. While it appears to be responsive, I wanted to test that out. Images seem to work fine within the pre-set containers (I put my image inside a p tag on the Feb 28 milestone).

After I added an image, I realized quickly that I’d want to set a width percentage to the image to allow it to scale with the rest of the page content.

img {width: 60%;}

While this seems like a slider, it’s so much better. The set up actually involves a set of CSS animations.

I view sourced and tinkered with the font and milestone circle sizes (they are connected). My plan is to try this setup out in a couple of instances. As I do and as I learn more about customizing this code bed I’ll make note of it here.

A couple other things I noticed about this particular set up — include my opinion that the mobile experience on this is awesome.


So far so good.

Chris Drinkut

Written by

Digital Marketing Analyst 💼 📊💡🗞️ Delivering Insights & Unearthing Overlooked Opportunities in Digital Marketing, SEO, PPC, & CRO.

More From Medium

Also tagged Design

Also tagged Design

Am I still a designer?

Apr 7 · 4 min read


Top on Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade