The following CSS is double used:
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
Line 20 & 28
Rick de man () - 9 years ago - Reply 0
hey, I am a newbie. Can we change it so that we have the right and left panel on the same line? I have a timeline where some events occur at the same time and so wanted it to show it on both left and right panel in the same row.
Uma () - 10 years ago - Reply 0
Ã've Added/modified some CSS for
- better view ( Zooming / smaller devices )
- Make the pages shorter, Bring timeline up when possible.
Changes:
.timeline > li > .timeline-panel: Width: 50%
Added:
.timeline > li.timeline-inverted + li:not(.timeline-inverted),
.timeline > li:not(.timeline-inverted) + li.timeline-inverted {
margin-top: -60px;
}
.timeline > li:not(.timeline-inverted) {
padding-right:75px;
}
.timeline > li.timeline-inverted {
padding-left:75px;
}
Feel Free to use like we can use yours !
Guest () - 10 years ago - Reply 0
Ã've Added/modified some CSS for
- better view ( Zooming / smaller devices )
- Make the pages shorter, Bring timeline up when possible.
Changes:
.timeline > li > .timeline-panel: Width: 50%
Added:
.timeline > li.timeline-inverted + li:not(.timeline-inverted),
.timeline > li:not(.timeline-inverted) + li.timeline-inverted {
margin-top: -60px;
}
.timeline > li:not(.timeline-inverted) {
padding-right:75px;
}
.timeline > li.timeline-inverted {
padding-left:75px;
}
Guest () - 10 years ago - Reply 0
I Don't Like It Sorry Its Very Basic And Easy To Do I Could Do It Within 2 Seconds
Pwned () - 10 years ago - Reply 0
Good for you buddy if you can do the same thing in 2 seconds, but you are not the only one to visit this website...
Thank you Sergiors for sharing, this is really interesting :)
Chris () - 10 years ago - Reply 0
I added some css classes to make it work responsive. Feel free to add them to the code:
@media (max-width: 767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge {
left: 15px;
margin-left: 0;
top: 16px;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
kiwi () - 10 years ago - Reply 0
The calc mode is nice and handy, but not all browsers do support this feature and or the syntax must contain more spaces:
width: calc(100% - 90px); - Might Fail
width: calc( 100% - 90px ) ; Works more often
Rikkert2x () - 10 years ago - Reply 0
Muito legal! Mas como eu consigo baixar para testes? Eu copiei os arquivos, salvei em arquivos css e html, mas, aparece desconfigurado. As divs estão se encontrando sobrepondo as bolinhas e não os Ãcones não aparecem. O que eu estou fazendo de errado?
Luis Carlos de Souza () - 10 years ago - Reply 0
Eu troquei a versão e instalei baixei as fontes glyphicon e funcionou legal. Agradeço!
Luis Carlos de Souza () - 10 years ago - Reply 0