Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 2, 2023 at 6:45 pm #1396451
    erictuvel

    I am using the Icon List element in the Advanced Layout Builder, and I would like the List Item Title to be aligned centered vertically, so that the Icon is in the center from Top to Bottom and to the Left of the Title Text. I am not sure there are settings in the element to do this and wondering if you can provide help with the CSS to get the desired effect. The page you can view this on for an example is here, in the Our Impacts & Accomplishments section.

    About

    I have pasted a link below to screenshot of what I am trying to explain. It would be great if this support forum allowed upload of images to share screenshots.

    https://drive.google.com/file/d/1QriZJlvYFCFQAiUSDpKg1j5joR_jw7Fe/view?usp=share_link

    February 3, 2023 at 5:29 am #1396489
    Ismael

    Hey Eric,

    Thank you for the inquiry.

    You can try this code in the Quick CSS field.

    ul.avia-icon-list li {
    display: flex;
    align-items: center;
    flex-direction: row;
}

ul.avia-icon-list li article {
    min-height: 45px;
    flex: 1 1 80%;
}

    Best regards,
    Ismael

    February 3, 2023 at 6:02 am #1396491
    Guenni007

    in addition to Ismaels code do not forget to remove those little paddings and margins ( on titles etc.)
    the distance between the list items comes then from a margin-bottom:

    .avia-icon-list .iconlist_content_wrap {
    padding: 0
}

ul.avia-icon-list li {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0;
    margin-bottom: 50px;
}

ul.avia-icon-list li article {
    min-height: 45px;
    flex: 1 1 80%;
}

ul.avia-icon-list li article .av_iconlist_title {
    margin: 0 !important;
    top: 0
}
    February 3, 2023 at 8:40 pm #1396586
    erictuvel

    Ok, thank you. Will this new CSS impact the entire site? Is there a way to make sure it only takes effect on this single page?

    February 3, 2023 at 11:59 pm #1396616
    Mike

    Hi,
    Based on Guenni007‘s css, to apply it only to your /about/ page add the page ID to the css like this:

    #top.page-id-92 .avia-icon-list .iconlist_content_wrap {
    padding: 0
}
#top.page-id-92 ul.avia-icon-list li {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0;
    margin-bottom: 50px;
}
#top.page-id-92 ul.avia-icon-list li article {
    min-height: 45px;
    flex: 1 1 80%;
}
#top.page-id-92 ul.avia-icon-list li article .av_iconlist_title {
    margin: 0 !important;
    top: 0
}

    After applying the css, please clear your browser cache and check.
    Thanks Guenni007

    Best regards,
    Mike

    February 4, 2023 at 12:05 am #1396617
    erictuvel

    That worked! Thank you!

    February 4, 2023 at 12:16 pm #1396652
    Rikard

    Hi,

    Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.