Hi there,
I am trying to create something that looks like this on desktop and then will change into a vertical timeline when on mobile:

This is an example of the horizontal version (the top one)
Could anyone help in making the line go downwards when on mobile?
Many thanks
Here’s a start 
@media screen and (max-width: 768px) {
.base-timeline__item {
display: flex;
width: auto;
margin: 0 auto 3rem;
}
.base-timeline {
width: auto;
display: table;
margin: auto;
}
ul.base-timeline:before {
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 2px;
border: none;
background: steelblue;
margin: auto;
}
.base-timeline__item:last-child {
width: auto;
}
.base-timeline__summary-text {
left: 0;
right: 0;
text-align: center;
background: #fff;
}
}
Here’s something similar in answer to a question in the forums last year.
1 Like
Oh, too slow.
My attempt using flex:-
The placement of the line feels a bit “magic number” though. 
2 Likes
Many thanks for the replies @PaulOB and @SamA74 . Those examples are perfect
Thanks for your help on this 
1 Like
system
Closed
5
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.