Timeline width

Please input date uniquely for every post.

Hi @giuliamemole,

Use below code in your footer.php.

<script>jQuery(document).ready(function($){
var total_event = $('.cd-horizontal-timeline .timeline .events-wrapper .events ol li').length;
for(var i=1; i<= total_event; i++){
$('.cd-horizontal-timeline .timeline .events-wrapper .events ol li:nth-child('+i+') a').css('left',+i*100+'px');
}
});</script>

• This reply was modified 6 years ago by sehgal.sunny.

Hi @sehgalsunny I insert the code, but it doesn’t work very well. As you can see at https://umbrapakaging.e21.it/azienda/ the timeline it is not long enough.

Hi @giuliamemole,

Replace above code with this:

<script>jQuery(document).ready(function($){
var total_event = $('.cd-horizontal-timeline .timeline .events-wrapper .events ol li').length;
for(var i=1; i<= total_event; i++){
$('.cd-horizontal-timeline .timeline .events-wrapper .events ol li:nth-child('+i+') a').css('left',+i*160+'px');
}
});</script>

Hi @sehgalsunny I also tried this code but it does not work well, ad you can see at https://umbrapakaging.e21.it/azienda/.
It’s also possible to hide prev e next buttons?
Thanks!

Add this css

ul.cd-timeline-navigation {
    display: none;
}

By this both prev and next button would be hide.

Hi, I insert the php code and the css code, but the line is still too short.

Hi @giuliamemole,

Put This CSS it will work:

section.cd-horizontal-timeline.loaded .events {
    width: 100% !important;
}

• This reply was modified 6 years ago by sehgal.sunny.

I also have a problem with the width of the timeline. the width is fixed at the moment with div class="events" style="width: 17220px;"> I already have the workaround in the css with width: 100%! important; but that seems to be ignored. I also have the problem that I can press after the last entry even further to the right and the bar is not properly colored. Is there a solution for this? my used code befor </body>: `<script>jQuery(document).ready(function($){
var total_event = $(‘.cd-horizontal-timeline .timeline .events-wrapper .events ol li’).length;
for(var i=1; i<= total_event; i++){
$(‘.cd-horizontal-timeline .timeline .events-wrapper .events ol li:nth-child(‘+i+’) a’).css(‘left’,+i*160+’px’);
}
});</script>`

https://1drv.ms/f/s!ArZsNBBIhcNfjTiiz3zjuleyNbBR