X Theme & Pro Theme

Responsive Cornerstone Timeline

X Theme & Pro Theme11 Comments

Time and time again I see X users asking about creating a timeline in Cornerstone. Truthfully, there are plenty of free and premium plugins that can do this. But what about users that prefer to not use a plugin? Well, how about a simple, clean, and responsive timeline using only Cornerstone and CSS. That’s what I have made here.

Your first step is to create a new section in Cornerstone. For each row, split into two columns and disable marginless columns in the row settings.

The setup is simple: in the first column, place your content. In this example, I have used a Custom Headline, Line, and Text. In the second column, insert a Gap element (I used 25px).

Repeat as many times as needed.

Now comes the magic! Give the entire section the custom class timeline, and place the following code into Custom CSS. At the bottom of this post is a download link for the complete Cornerstone .csl template file.

Code updated for X version 5.1+ and Pro version 1.2+

Here is a download link containing a Cornerstone template file that you can easily import into your existing page:

Click to download Responsive_Timeline.zip


Like what you see? Then get it in your inbox.

  • This field is for validation purposes and should be left unchanged.

Leave a Reply

Notify of
Antony Hepworth
Antony Hepworth

Thanks for such a helpful X theme site, I’m sure this will be an invaluable resource for me going forward.

Joe Lindsay
Joe Lindsay

Just what I needed for one of my websites, works a treat!

Natalie Oleksyshyn
Natalie Oleksyshyn

Hi, I loved your code and used it on the website, but it doesn’t work right with the latest x theme update. Can you please update it?

As you can see, the bars are off on the page: https://boxerwood.org/about/

I would greatly appreciate it!


Hi Michael, I’ve found a few of your items very useful, thanks for taking the time!
I’m having an odd issue with the timeline on this site – https://www.linkglobalservices.co.uk/product-sourcing/ – I’ve used the updated code but we have “leftover” borders on the page that I can’t find anywhere within the code? Have you any ideas what the problem could be?


Please ignore! It was a cache issue… Doh!!!


Hi Michael, Apologies, clearing the cache didn’t work. Any ideas would be appreciated?