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?
Ahmad Zaytoun () - 7 years ago - Reply 1
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 pence206175@gmail.com 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.
Austin Pence () - 7 years ago - Reply 0
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
Foc WebDesigners () - 7 years ago - Reply 0
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,
Alejandro Peña () - 8 years ago - Reply 0
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
Ayush () - 8 years ago - Reply 0
Here is a Tutorial for Wordpress: https://webdesign-vellmar.d...
Tobias Pa () - 8 years ago - Reply 0
Excellent work. Just a thought, Is there a way I can have multiple lines from one node ?
Vinod Balakrishnan () - 9 years ago - Reply 0
Hi! I love this timeline. It works fine in IE and Chrome, however not in Firefox. Can someone help me to get that right?
MarsConnects () - 9 years ago - Reply 0
Excellent Excellent - Truly Magnificent ... Full marks ...
ŠâÅmäñ HäÃÃeÅ• ĸħän () - 9 years ago - Reply 0
Una idea genial! Con tu permiso lo utilizaré.
Aunque el tema responsive aún tiene algunos detalles que arreglar.
Anaïs () - 9 years ago - Reply 0
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?
faustian () - 9 years ago - Reply 0
If no one looks into this by the end of tomorrow I will look into it over the weekend.
mouse0270 () - 9 years ago - Reply 0
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!
faustian () - 9 years ago - Reply 0
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.
mouse0270 () - 9 years ago - Reply 0
modify
.team-timeline>li:nth-child(even) .team-timeline-image
css 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 :)
ŠâÅmäñ HäÃÃeÅ• ĸħän () - 9 years ago - Reply 0
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!
faustian () - 9 years ago - Reply 0
modify this
.team-timeline>li:nth-child(even) .team-timeline-image
css 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 :)
ŠâÅmäñ HäÃÃeÅ• ĸħän () - 9 years ago - Reply 0
How can I edit the CSS to make the blue lines less inclined?
Fernando Monteiro () - 9 years ago - Reply 0
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.
mouse0270 () - 9 years ago - Reply 0
