Hi Frederic,
The free version essentially layout the timeline announcements without using any javascript. In previous versions, we used to tweak the CSS to bring the announcements closer together but found that (more often than not) users had announcements with variable lengths.
Minimizing the distance between the announcements worked for some, but not all, and often caused announcements to overlap with each other. Since this was not a globally working solution, we had to remove it from the plugin – as it was causing more issues than not.
If you want to close the gap on those announcements, you can use CSS to minimize the margins between announcements – but beware, with our free version, some of your announcements may overlap.
Some code that might help get you started:
.cd-timeline-block {
margin: -4em 0;
}
The -4em is setting a top and bottom margin of -4em – but you can tweak this to whatever value you’d like (px or em values). I played around with your site a bit to get that value, but you may find another value suits your tatse better.
If you look at the demo on our site, you’ll notice that the announcements are a lot closer together:
https://www.wp-timelineexpress.com/examples/basic-timeline/
This is one of the features of the pro version – the timeline is initialized and laid out differently than our free version – to allow for the close layouts of each announcement.
Please let us know if the CSS solution above works out well for you.
Hello,
thank you for the fast response.
I already read about that CSS code in your documentation, but this doesn’t work for me.
Maybe because of my theme?
So if I buy the pro version I will get a minimized distance between every announcement?
Hi Frederic,
That’s correct – purchasing the pro version will get you the exact layout we have up on our demo. If you do go ahead and purchase the pro version, we’re running a sale right now for 20% off to celebrate the launch of v2 of Timeline Express Pro. The code to use is TIMELINE2 at checkout, for 20% off.
It’s possible that you just have to add a !important declaration after the CSS. Something like this:
.cd-timeline-block {
margin: -4em 0 !important;
}
However, this will affect all views, including mobile – which will most likely cause a few issues.
If you have any questions don’t hesitate to reach out to us!
Hello,
i got a same but little different problem. A while ago i purchased the premium version of timeline express. And no my timelines are in extremely chaos. With just one timeline in the free version it worked but now with two time lines in messes up.
Here is my site http://beta.via-ev.de/service/der-verlauf-ihres-projektes/
Thank you for helping!
Kind regards!
Hi @cy17,
Feel free to email us via the support form within the plugin, or via the contact form on our website. If you are using the pro version you can enable legacy support on the settings page, which will lay things out similar to the free version, to prevent that issue while we communicate via email to figure it out.
