Posted By admin
Tags: ,
Timeline
Demo

The following CSS is double used:,.timeline > li:before,.timeline > li:after {content: ” “;display: table;}.timeline > li:after {clear: both;},Line 20 & 28,Hahaha, Mussum ipsum muito foda.Ótimo snip, valeu!,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.,Hi, well I didn’t do that in this example =/,Í’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 !,Í’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;},great design, love the simplicity!,I Don’t Like It Sorry Its Very Basic And Easy To Do I Could Do It Within 2 Seconds,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 :),for this reason is salt to taste ;),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; }},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 Failwidth: calc( 100% – 90px ) ; Works more often,Thanks Kiwi, can you put it in codepen?,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?,Eu troquei a versão e instalei baixei as fontes glyphicon e funcionou legal. Agradeço!,Dude, thank you so much for sharing!,Great!,Uma das divs está sem a bolinha. É assim mesmo?,Sim sim, é opcional,The author is sergiors

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *