Divi Timeline Module for Visual Builder

Solutions

 
— Old Solutions that may no longer necessary —
 
Use this snippet to align timeline nodes with timeline boxe’s arrow,

.timeline .timeline-panel::after, .timeline .timeline-panel::before {
top: 45%;
}

If it didn’t work then try adding !important after 45%.
If you want to fine tune the alignment, change 45% to the number that fits best.
 

…… Text Badge Overlap Fix ……

When you are using ‘Text Badge’ and enabled Circle Border around it you might see that the Badge overlaps the text box blurb (In mobile and tablet screen sizes). Please use the following snippet and adjust it for your taste to fix this,

span.et-pb-icon.timeline-text.text-circle.text-circle-border {
border: 2px solid #0c71c3;
width: 100px;
text-align: center;
padding: 4px 4px;
font-size: 16px;
}

@media screen and (max-width: 1025px) {
span.et-pb-icon.timeline-text.text-circle.text-circle-border {
font-size: 14px;
margin-left: -40px;
width: 80px !important;
}
}

@media screen and (min-width: 480px) {
span.et-pb-icon.timeline-text.text-circle.text-circle-border {
margin-left: 0px !important;
}
}

…… Remove Timeline List Item Styles ……

If you just want a plain timeline list item design without the styles then following codes will help you achieve it,

.timeline .timeline-panel {
border: none;
box-shadow: none !important;
background: transparent;
}
.timeline .diti_timeline_item:nth-of-type(odd) .timeline-panel:before {
display: none;
}
.timeline .diti_timeline_item:nth-of-type(odd) .timeline-panel:after {
display: none;
}

.timeline .diti_timeline_item:nth-of-type(odd) .timeline-panel {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.timeline .diti_timeline_item:nth-of-type(even) .timeline-panel {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.timeline-panel::after, .timeline-panel::before {
	display: none !important;
}