Timeline Centered

Dear team,

I have a problem with the different blocks in the timeline. Blocks on the left have a space with the central line but not the blocks on the right. How can I resolved this? Also, how can I put images in the central line (like the timeline of the Sydney Pro).

Here there is the screen shot of my site: TimeLine

Thank you so much in advance

Hello @jjmartinr,

Please go to your Dashboard -> Timeline events -> edit a timeline event -> make sure that Timeline options checkbox is checked in Screen Options on top -> scroll down to Timeline options section -> add Event icon -> click Update.

That should also fix the layout.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Thank you for your help. I did it and I could add an icon but the layout problem (no margin between the central line and the event) still unfixed. I’ve tried to change the CSS but I couldn’t fixed:
`.timeline .content {
width: 90%;
float: left;
border-radius: 6px;
border: 2px solid #ebebeb;
padding: 15px;
background-color: #fff;
}
.timeline-even .icon {
float: right;
position: relative;
right: -30px;
}
.timeline-odd .icon {
float: left;
position: relative;
left: -30px;
}
.timeline-odd .timeline-inner {
float: right;
border-left: 5px solid #dcE1e4;
position: relative;
left: -5px;
}
.timeline-even .timeline-inner {
border-right: 5px solid #DCE1E4;
}
.timeline-inner h3 {
font-size: 15px;
margin: 0 0 15px;
}
.timeline-date {
display: block;
margin-bottom: 10px;
color: #bebebe;
}

What line I have to change to fix the problem. This is a screen shot with my problem:
https://drive.google.com/file/d/0B9gj8IqrZDbnUVE1M0dqUTh3ZlE

Thank you so much in advance

JJ

Hello JJ,

Looks like your The Black Atlantic timeline event doesn’t have an icon. Can you please try to add an icon (and remove any custom CSS)?

Kind Regards, Roman.

Hi Roman,

I just added an icon as you asked me (I don’t have custom CSS) but the result is the same. Also, Is it possible to center the icon with the event?. Now, the icon appears at the top of the event. You can see that in the following screen shot: http://bit.ly/1nMyfKW

Thank you for your help in advance.

Hello JJ,

I will be glad to help you, but can you please provide a link to your website to let me inspect it?

Kind Regards, Roman.

Hi Roman,

I can’t send you the link because the site is in my local host, but I’ve found the mistake. There is an error in the Timeline CSS. The code is:

.timeline .content {
width: 90%;
float: left; --> inherit
border-radius: 15px;
border: 2px solid #ebebeb;
padding: 15px;
background-color: #fff;
}

But Float was forced to be at left when it has to inherit from ‘timeline-even’ and ‘timeline-odd’. It’s necessary to change the Float’s value to: “Inherit”.

Thank you again, for your help,

JJ

Hello JJ,

I can’t provide much help without ability to inspect the code.

The CSS rule that you mentioned in the post above should contain float: left;.

If you changed it to float: inherit;, then please change it back to float: left;.

Kind Regards, Roman.