Icons at the timeline

Hi Harry,

Are you referring to the iconlist like the one showing in this demo https://kriesi.at/themes/enfold/#av_section_3 ?
If yes, please add this CSS code in Enfold > General Styling > Quick CSS:

#top .avia-icon-list .iconlist_icon {
    border-radius: 0;
    position: relative;
}

#top .avia-icon-list .iconlist_icon:before, 
#top .avia-icon-list .iconlist_icon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
}

#top .avia-icon-list .iconlist_icon:before {
    border-bottom: 18px solid #d0d0d0;
    bottom: 100%;
    left: 0;
}

#top .avia-icon-list .iconlist_icon:after {
    border-top: 18px solid #d0d0d0;
    top: 100%;
    left: 0;
    width: 0;
}

Best regards,
Nikko

Hi Harry,

Can you give us the link to the page where the iconlist is showing? so we can inspect why it’s not working.

Best regards,
Nikko

Hi Harry,

Thanks, please use this CSS code instead:

#top .avia-timeline .av-milestone-icon-wrap, 
#top .avia-timeline .milestone_icon {
    overflow: visible;
}

#top .avia-timeline .milestone_icon, 
#top .avia-timeline .milestone_inner {
    border-radius: 0;
    position: relative;
}

#top .avia-timeline .milestone_inner:before, 
#top .avia-timeline .milestone_inner:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 45px solid white;
    border-right: 45px solid white;
}

#top .avia-timeline .milestone_inner:before {
    border-bottom: 25px solid #3ca5de;
    bottom: 80%;
    left: 0;
}

#top .avia-timeline .milestone_inner:after {
    border-top: 25px solid #3ca5de;
    top: 80%;
    left: 0;
    width: 0;
}

#top .avia-timeline .av-milestone:nth-child(2n) .milestone_inner:before {
    border-bottom: 25px solid #4a84c4;
}

#top .avia-timeline .av-milestone:nth-child(2n) .milestone_inner:after {
    border-top: 25px solid #4a84c4;
}

#top .avia-timeline .av-milestone:nth-child(3) .milestone_inner:before {
    border-bottom: 25px solid #4368af;
}

#top .avia-timeline .av-milestone:nth-child(3) .milestone_inner:after {
    border-top: 25px solid #4368af;
}

#top .avia-timeline .av-milestone:nth-child(4) .milestone_inner:before {
    border-bottom: 25px solid #4260a9;
}

#top .avia-timeline .av-milestone:nth-child(4) .milestone_inner:after {
    border-top: 25px solid #4260a9;
}

Hope it helps.

Best regards,
Nikko

Hi Harry,

Can you try adding this CSS code:

@media only screen and (max-width:1024px) {
  #top .avia-timeline .milestone_inner:before {
    bottom: 72%;
  }

  #top .avia-timeline .milestone_inner:after {
    top: 72%;
  }
}

@media only screen and (max-width:767px) {
  #top .avia-timeline .milestone_icon {
    padding-top: 10px;
  }

  #top .avia-timeline .milestone_inner:before, 
  #top .avia-timeline .milestone_inner:after {
    border-left: 32px solid white;
    border-right: 32px solid white;
  }

  #top .avia-timeline .milestone_inner:before {
    border-bottom-width: 20px;
  }

  #top .avia-timeline .milestone_inner:after {
    border-top-width: 20px;
    top: 90%;
  }
}

Best regards,
Nikko

Hi Harry,

I tried to check again your site and it gets redirected to the coming soon page: https://www.bruckner-engineering.com/e013e4bb-28db-4d61-817f-437e9f1257b4/
I think you just need to tweak the last portion of the code I gave:

  #top .avia-timeline .milestone_inner:before {
    border-bottom-width: 20px;
  }

  #top .avia-timeline .milestone_inner:after {
    border-top-width: 20px;
    top: 90%;
  }

The first block add a bottom value, then for the second block adjust the top value.
You can use % or px and to fine tune it.
I hope this is helpful.

Best regards,
Nikko