Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 26, 2021 at 6:56 pm #1296811
    pipedream

    Hi, I have read your article https://kriesi.at/support/topic/horizontal-icons-list/ which very nearly works for me but you will see on the attached link top right corner that the text associated with the icons does not render correctly. Can you help please? Ideally i would like the text underneath the icons

    I used the css #top .horizontal-icons-custom-class ul.avia-icon-list li {
    display: inline-block;
    float: none;
    margin-left: 10px;
    margin-right: 10px;
    }

    #top .horizontal-icons-custom-class ul.avia-icon-list {
    text-align: center;
    }

    #top .horizontal-icons-custom-class ul.avia-icon-list li a.iconlist_icon {
    margin-left: auto;
    margin-right: auto;
    }

    April 28, 2021 at 9:37 am #1297129
    Ismael

    Hey pipedream,

    Thank you for the inquiry.

    How would you like the icon list to display? Please provide a screenshot or a mockup using imgur or dropbox.

    You can use this css code to move the icon content container below the actual icon.

    .avia-icon-list .iconlist_content_wrap {
    overflow: unset;
}

    And if you want to remove the dashed line, use this css code.

    .avia-icon-list .iconlist-timeline {
    display: none;
}

    Best regards,
    Ismael

    April 28, 2021 at 11:33 am #1297142
    pipedream

    Hi Ismael, Thank for the info, using you provided code we are very nearly there, I would just like to center the actual icons above the heading and move the text up (the 2.1 Miles line for examples) slightly. Please see css below including your suggested changes.

    .horizontal-icons-custom-class ul.avia-icon-list {
    text-align: center;
    }
    .horizontal-icons-custom-class ul.avia-icon-list li {
    display: inline-block;
    float: left;clear:none;
    margin-left: 5px;
    margin-right: 5px;
    }
    .avia-icon-list .iconlist_content_wrap {
    overflow: unset;
    }
    .avia-icon-list .iconlist-timeline {
    display: none;
    }

    Thanks

    Andrew

    April 29, 2021 at 12:39 pm #1297323
    Ismael

    Hi,

    Thank you for the update.

    Try to use this css code to align the description or content with the icon, and reduce the space after the title.

    
.horizontal-icons-custom-class ul.avia-icon-list li {
    margin-left: 0;
    margin-right: 40px;
    text-align: center;
}

.horizontal-icons-custom-class ul.avia-icon-list li {
    text-align: center;
}

.avia-icon-list .iconlist_icon {
    float: none;
    display: inline-block;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 10px;
}

.iconlist_content p {
    margin: 0.2em 0;
}

    Best regards,
    Ismael

    April 29, 2021 at 2:23 pm #1297366
    pipedream

    That’s perfect, many thanks!

    April 30, 2021 at 1:23 am #1297435
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Horizontal Icons + Text’ is closed to new replies.