Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1377903

    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, 9 months ago by nV15OoBtg21iTn5z. Reason: Included screenshot
    • This topic was modified 1 year, 9 months ago by nV15OoBtg21iTn5z.
    #1377923

    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

    #1378047

    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!

    #1378054

    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

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