Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 26, 2021 at 5:00 pm #1296800
    fkm

    Hi, Enfold team.

    I´m using a horizontal timeline (milestones) – which is a really nice feature by the way – and I just reduced the size of the icons.
    Now, of course, the individual components no longer fit together so well: the lines with the dots at the end no longer touch the icons and the navigation arrows are no longer centered on the dashed line (please see screenshot).
    I´d also like to change the position of the description of the individual milestones.
    I already tried to fix this on my own by looking at the enfold documentation and other related topics.
    Unfortunately without success.

    So I would be very grateful if you could help me with this.

    Thank you very much in advance.

    Best regards,
    fkm

    April 28, 2021 at 9:06 am #1297125
    Ismael

    Hey fkm,

    Thank you for the inquiry

    How did you adjust the size of the icon? Did you use a custom css? You can insert additional css to adjust the position of the elements.

    Example:

    
/* adjusts the horizontal date lines and dot */
.avia-timeline-horizontal .av-milestone-date span {
    left: -63px;
}

/* adjusts the milestone content wrapper */
.avia-timeline-horizontal.av-milestone-placement-top .av-milestone-content-wrap {
    left: -5px;
}

/* adjusts the milestone description container */
.avia-timeline-horizontal .av-milestone-contentbox {
    position: relative;
    left: -20px;
    top: 20px;
}

    Best regards,
    Ismael

    April 30, 2021 at 10:08 am #1297503
    fkm

    Hey Ismael,

    thank you very much for your reply (and please excuse my late).

    I did use a custom css in quick css to adjust the size of the icons.
    But I just found out that it looks pretty nice on mobile devices without making any changes because the icons automatically become smaller.
    Anyway your css helped me to make fine adjustments – so thank you again.

    Still I think that the icons on large screens are too big in this case and so I wonder if there is a code to leave them as it is on mobile devices?
    I would also like to move the date of the individual milestones a little more to the left (closer to the dot) and remove the dot on the line that leads to the description. Is there a quick fix for this?

    Thanks in advance.

    Best regards,
    fkm

    April 30, 2021 at 12:21 pm #1297527
    Ismael

    Hi,

    Thank you for the update.

    so I wonder if there is a code to leave them as it is on mobile devices?

    You can wrap the css code above with a css media query to keep the changes on desktop view.

    @media only screen and (min-width: 989px) {
   /* desktop styles - move css code here */
}

    To move the date to the left a bit, add this css code.

    .avia-timeline-horizontal.av-milestone-placement-top .av-milestone-date > a, .avia-timeline-horizontal.av-milestone-placement-top .av-milestone-date > strong {
    text-indent: -16px;
}

    Best regards,
    Ismael

    May 3, 2021 at 4:42 pm #1298060
    fkm

    Hi, Ismael.

    With your support, I was able to make all changes as desired (and could also learn something new) – thank you so much!

    Only the navigation arrows are no longer in the middle of the dashed line when viewing on large screens (please see screenshot).
    Please let me know how to fix this.

    Thanks in advance.

    Best regards,
    fkm

    May 3, 2021 at 4:45 pm #1298061
    Yigit

    Hi,

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
@media only screen and (min-width: 768px) { 
.av-timeline-nav {
    padding-top: 58px;
}}

    Cheers!
    Yigit

    May 3, 2021 at 4:56 pm #1298063
    fkm

    Hi, Yigit.

    Wow, that was quick.
    And it worked just fine.
    Perfect.

    Thank you very much!

    Best regards,
    fkm

    May 3, 2021 at 5:18 pm #1298068
    Yigit

    Hey!

    You are welcome!
    Let us know if you have any other questions and enjoy the rest of your day! :)

    Cheers!
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘adjustments to the horizontal timeline (milestones)’ is closed to new replies.