PUBLISHED ON: AUGUST 18, 2021
How to create a responsive timeline with CSS?
A graphical representation of the events is listed on the website. It is arranged in the order of the dates. This graphical representation of the event is known as a timeline. The timeline can be created with CSS.
Creating a Timeline
The timeline contains a list of events arranged in some specific order like month or year. Here, we have added a column of events scheduled according to month-wise. For that, we have used display: flex property.
The flex is used to allocate each column some definite percentage of screen width like flex:50% allocates 50% width of the screen. Additionally, we can use other properties like padding, margin, background-color to customize the timeline. To make it responsive use, @ media rule, and add CSS code within it.
Example: The Responsive timeline with CSS
Three columns are displayed horizontally for a large screen. We have changed it to two-column per row for display less than 800px and one column per row for display size less than 500px. For that, we have used @media rule and added the CSS property accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<style>
.column {
flex: 30%;
max-width: 30%;
height: 200px;
padding: 10px;
margin: 5px;
background-color: #cccccc;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 800px) {
.column {
flex: 40%;
max-width: 40%;
}
}
/* The Timeline */
@media screen and (max-width: 500px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<h2> Timeline</h2>
<div class="container">
<div class="column">
<h2> Janurary</h2>
<p> Some Event in the list <p>
</div>
<div class="column">
<h2> Feburary </h2>
<p> Some Event in the list <p>
</div>
<div class="column">
<h2> March</h2>
<p> Some Event in the list <p>
</div>
</div>
</body>
</html>
Output
Here is the output of the above code.
For large Screen
For small screen
Example: The responsive Timeline with CSS
In the next example, we have enhanced the timeline by adding some more CSS properties. Here we have added arrows to the container using border property.
Conclusion
In this tutorial, we have learned to create a timeline with CSS. We have used various CSS properties to do so. It has been explained with examples.
