Create a responsive timeline with HTML and CSS

In this snippet, we will learn how to create a responsive timeline with HTML and CSS.

Step 1, add meta tag to header:

 

This is meta tag for responsive handle

Step 2, Add HTML code below to your HTML file:

 

2019

Something happened in 2019

2018

Something happened in 2018

2017

Something happened in 2017

2016

Something happened in 2016

2015

Something happened in 2015


The elements with class name "timeline" is a container wrapped for all timeline element inside.

Step 3, Copy and paste this CSS code into your CSS file:

                  * {
     box-sizing: border-box;
    }

    body {
     background-color: #6e97ea;
     font-family: Helvetica, sans-serif;
    }

    .timeline {
     position: relative;
     max-width: 1200px;
     margin: 0 auto;
    }

    .timeline::after {
     content: "";
     position: absolute;
     width: 3px;
     background-color: white;
     top: 0;
     bottom: 0;
     left: 50%;
     margin-left: -2px;
    }

    .timeline-item {
     padding: 10px 40px;
     position: relative;
     background-color: inherit;
     width: 50%;
    }

    .timeline-item::after {
     content: "";
     position: absolute;
     width: 15px;
     height: 15px;
     right: -9px;
     background-color: #4caf50;
     border: 2px solid #fff;
     top: 22px;
     border-radius: 50%;
     z-index: 1;
    }

    .left {
     left: 0;
    }

    .right {
     left: 50%;
    }

    .left::before {
     content: " ";
     height: 0;
     position: absolute;
     top: 22px;
     width: 0;
     z-index: 1;
     right: 30px;
     border: medium solid white;
     border-width: 10px 0 10px 10px;
     border-color: transparent transparent transparent white;
    }

    .right::before {
     content: " ";
     height: 0;
     position: absolute;
     top: 22px;
     width: 0;
     z-index: 1;
     left: 30px;
     border: medium solid white;
     border-width: 10px 10px 10px 0;
     border-color: transparent white transparent transparent;
    }

    .right::after {
     left: -10px;
    }

    .content {
     padding: 20px 30px;
     background-color: white;
     position: relative;
     border-radius: 6px;
    }

    /* Responsive on screens less than 600px wide */
    @media screen and (max-width: 600px) {
     .timeline::after {
        left: 31px;
     }

     .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
     }

     .timeline-item::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
     }

     .left::after,
     .right::after {
        left: 21px;
     }

     .right {
        left: 0%;
     }
    }

CSS code above included responsive for screens less than 600px wide.

© 2019 4codev

Created with love by Sil.