To practice developing a Timeline with Kadence Blocks, I tried another version—using a three-column row and the line as an absolute-positioned element.

Here is a preview of the end result:

Screenshot of a Responsive Vertical Timeline (version 2)
Screenshot of a Responsive Vertical Timeline (version 2)

How it’s built:

This version of the timeline uses Kadence Blocks Free (3 column Rows) + a border added with CSS.

Screenshot of a Kadence Blocks dashboard showing the structure of Timeline

This is the CSS I used to create the responsive border. The border is hidden for the last element of the timeline – mobile version.

/* Vertical Timeline v2 */

.is-border {
  border-left: 2px dashed gray;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
}
@media (max-width: 910px) {
  .border-margin {
    margin: 79px 50% 0;
}
}
@media (min-width: 911px) {
  .border-margin {
    margin: 100% 50% 0;
}
  .hide-desktop {
    display: none;
}
}

You can find everything in action on my KadenceWP Demo Website: Responsive Vertical Timeline v2

Similar Posts