Posted By admin
Tags: ,
Zigzag Timeline Layout
Demo

I am looking to do something similar to this except instead of using it as a timeline I’d like to use it on my homepage as another way to navigate to different sections of my website. My ultimate goal is to have 4 circles (representing 4 sections of the website), that when connected by the lines end up forming a diamond shape. So top circle with lines down to a left circle & a right circle and lines from those 2 circles down to a bottom circle. In addition, I’d like them to rotate clockwise so that each has that top spot and no single element (or site section) is seen as more or less important. If this is something anybody can help me with I’d greatly appreciate it and even do some work on any of your projects in return. I’d of course send you my website information so you can see the current code, the current design, and how easy/hard this task may be given what I currently have. Email me at [email protected] if interested in collaborating or even if you simply have a few basic ideas. I’d be appreciative of any thoughts regardless of if they end up actually contributing or not.,I’m having a problem when i use this code inside a container instead of container-fluid. not fit in the container correctly. does anyone know any solution? thanks in advance,Thank you for this great timeline.i just have the problem everyone is having on small screens. I changed the code to this:.team-timeline>li:nth-child(even) .team-timeline-image { left: 0; margin-left: 0; float: left; },however, I still have a problem. My images are bigger than the darkblue background circles. Here is my code for those:,<img class=”rounded-circle img-responsive” src=”img/ik.jpg” alt=”” width=”185px” height=”185px”>,any help?,Muchas gracias! La verdad muy creativo! Para los que tengan problemas con la visualización en responsive, prueben si les sirve esto: Ubican @media only screen and (max-width: 767px) {,y modifican las siguientes clases, .timeline>li:nth-child(even) .timeline-image { float: left; right: 0; margin-left: 0; } .timeline>li:nth-child(odd) .timeline-image { float:right; left: 0px; margin-left:0; },Saludos,,Not working in mobile ,seems there is issue with devices like tablets like ipad, nexus 10 the distance between steps is not correct, can somebody fix it….it is not responsive for tablets,Here is a Tutorial for WordPress: https://webdesign-vellmar.d…,Good work,Very nice… i write it to a wordpress blog overview ;-),Excellent work. Just a thought, Is there a way I can have multiple lines from one node ?,Hi! I love this timeline. It works fine in IE and Chrome, however not in Firefox. Can someone help me to get that right?,Excellent Excellent – Truly Magnificent … Full marks …,Una idea genial! Con tu permiso lo utilizaré.,Aunque el tema responsive aún tiene algunos detalles que arreglar.,This is really cool. It seems to break when at widths less than 768px, in the last media query section. The two “step 3” sections occupy the same line and merge together. Is there a simple fix?,If no one looks into this by the end of tomorrow I will look into it over the weekend.,Hi mouse, did you get a chance to look at this? I’ll have a go if you can’t but am a CSS noob!,Nope, sadly half the keys on my keyboard stopped working and since I use the Microsoft comfort Curve 3000 keyboard I have a hard time working on standard shaped keyboards. So I wasn’t able to work on anything this week. I ordered a new keyboard and it’ll be here tomorrow. I take a look at it this weekend.,modify .team-timeline>li:nth-child(even) .team-timeline-imagecss rule under @media only screen and (max-width: 767px) to this one,.team-timeline>li:nth-child(even) .team-timeline-image { left: 0; margin-left: 0; float: left; },and you are done :),The fix was really simple – in the “@media only screen and (max-width: 767px)” section add “float:left;” to .timeline>li:nth-child(even) .timeline-image, so it becomes:,.timeline>li:nth-child(even) .timeline-image { float:left; left: 0; margin-left: 0; },Hope that helps anyone who was stuck!,Its good but … not repsonsive,modify this .team-timeline>li:nth-child(even) .team-timeline-imagecss rule under @media only screen and (max-width: 767px) to this one,.team-timeline>li:nth-child(even) .team-timeline-image { left: 0; margin-left: 0; float: left; },and you are done :),How can I edit the CSS to make the blue lines less inclined?,You would have to change the `transform:rotate(44deg);` and `transform:rotate(-44deg);` on lines 119 and 134 to something that more better suits you.,You would remove box-shadow: 0 0 5px #4582ec;,@mouse0270:disqus is correct 🙂 my bad!,Thank you,Awesome,How has this not gotten more attention, this looks amazing!,The author is andrewnite

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 *