Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 6, 2023 at 11:13 pm #1377903
    nV15OoBtg21iTn5z

    I have multiple lines of text, each with an avia icon to the left of the text.

    Is it possible to align the icons centered vertically above themselves… and also align them horizontally centered with the respective line of text?

    I’m basically trying to replicate the look of an icon list without actually using that element. My pages are auto-generated by submissions and using the icon list element in the template gets problematic.

    Example URLs are attached — you can see how jumbled the layout is.

    • This topic was modified 1 year, 10 months ago by nV15OoBtg21iTn5z. Reason: Included screenshot
    • This topic was modified 1 year, 10 months ago by nV15OoBtg21iTn5z.
    January 7, 2023 at 12:15 pm #1377923
    Rikard

    Hey nV15OoBtg21iTn5z,

    Please try the following in Quick CSS under Enfold->General Styling:

    .su-box-content p.with_icon span.av_font_icon {
  margin-top: 7px;
}

    Best regards,
    Rikard

    January 9, 2023 at 7:48 pm #1378047
    nV15OoBtg21iTn5z

    The CSS worked (actually 5px was better) — but I found that depending on the number of lines the alignment was still off.

    I had to wrap each individual line in <p>. Otherwise, the alignment only worked when there were 6 lines.

    It’s good now. Thank you!

    January 9, 2023 at 8:13 pm #1378054
    Rikard

    Hi,

    Great, I’m glad that you found a solution. 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 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.