Title: Timeline width
Last modified: February 20, 2019

---

# Timeline width

 *  Resolved [giuliacencetti](https://wordpress.org/support/users/giuliamemole/)
 * (@giuliamemole)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/timeline-width/)
 * I have inserted the timelin on this page, but the bar does not occupy the full
   width of the page, and the years 2012 and 2016 should be much closer to the end
   of the bar on the right.
    What can I do?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ftimeline-width%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Plugin Author [sehgal.sunny](https://wordpress.org/support/users/sehgalsunny/)
 * (@sehgalsunny)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/timeline-width/#post-11226204)
 * Please input date uniquely for every post.
 *  Plugin Author [sehgal.sunny](https://wordpress.org/support/users/sehgalsunny/)
 * (@sehgalsunny)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/timeline-width/#post-11226755)
 * Hi [@giuliamemole](https://wordpress.org/support/users/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 7 years, 3 months ago by [sehgal.sunny](https://wordpress.org/support/users/sehgalsunny/).
 *  Thread Starter [giuliacencetti](https://wordpress.org/support/users/giuliamemole/)
 * (@giuliamemole)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/timeline-width/#post-11235210)
 * Hi [@sehgalsunny](https://wordpress.org/support/users/sehgalsunny/) I insert 
   the code, but it doesn’t work very well. As you can see at [http://umbrapakaging.e21.it/azienda/](http://umbrapakaging.e21.it/azienda/)
   the timeline it is not long enough.
 *  Plugin Author [sehgal.sunny](https://wordpress.org/support/users/sehgalsunny/)
 * (@sehgalsunny)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/timeline-width/#post-11243385)
 * Hi [@giuliamemole](https://wordpress.org/support/users/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>
       ```
   
 *  Thread Starter [giuliacencetti](https://wordpress.org/support/users/giuliamemole/)
 * (@giuliamemole)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/timeline-width/#post-11244049)
 * Hi [@sehgalsunny](https://wordpress.org/support/users/sehgalsunny/) I also tried
   this code but it does not work well, ad you can see at [http://umbrapakaging.e21.it/azienda/](http://umbrapakaging.e21.it/azienda/).
   
   It’s also possible to hide prev e next buttons? Thanks!
 *  Plugin Author [sehgal.sunny](https://wordpress.org/support/users/sehgalsunny/)
 * (@sehgalsunny)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/timeline-width/#post-11244223)
 * Add this css
 *     ```
       ul.cd-timeline-navigation {
           display: none;
       }
       ```
   
 * By this both prev and next button would be hide.
 *  Thread Starter [giuliacencetti](https://wordpress.org/support/users/giuliamemole/)
 * (@giuliamemole)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/timeline-width/#post-11249363)
 * Hi, I insert the php code and the css code, but the line is still too short.
 *  Plugin Author [sehgal.sunny](https://wordpress.org/support/users/sehgalsunny/)
 * (@sehgalsunny)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/timeline-width/#post-11249436)
 * Hi [@giuliamemole](https://wordpress.org/support/users/giuliamemole/),
 * Put This CSS it will work:
 *     ```
       section.cd-horizontal-timeline.loaded .events {
           width: 100% !important;
       }
       ```
   
    -  This reply was modified 7 years, 3 months ago by [sehgal.sunny](https://wordpress.org/support/users/sehgalsunny/).
 *  [akkarin0082](https://wordpress.org/support/users/akkarin0082/)
 * (@akkarin0082)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/timeline-width/#post-11417010)
 * 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](https://1drv.ms/f/s!ArZsNBBIhcNfjTiiz3zjuleyNbBR)

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Timeline width’ is closed to new replies.

 * ![](https://ps.w.org/timeline-history/assets/icon-256x256.png?rev=1683403)
 * [Timeline History](https://wordpress.org/plugins/timeline-history/)
 * [Support Threads](https://wordpress.org/support/plugin/timeline-history/)
 * [Active Topics](https://wordpress.org/support/plugin/timeline-history/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/timeline-history/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/timeline-history/reviews/)

## Tags

 * [spacing](https://wordpress.org/support/topic-tag/spacing/)

 * 9 replies
 * 3 participants
 * Last reply from: [akkarin0082](https://wordpress.org/support/users/akkarin0082/)
 * Last activity: [7 years, 1 month ago](https://wordpress.org/support/topic/timeline-width/#post-11417010)
 * Status: resolved