Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1116927

    thecashbag
    Participant

    This is how the “icon list” element currently works:

    [icon][some text]
    [icon][some text]
    [icon][some text]

    But I want to make a list like this:

    [icon][some text] [icon][some text] [icon][some text]

    How do I do that?

    I have tried adding “display: inline;” and “”display: inline-block;” to the style tag, but it does not work.

    #1116961

    Christian
    Moderator

    Hey there,

    Add inline class to your Icon List element (see attachment). There’s an inline list style in X so it’ll work out of the box (see attachment)

    Hope that helps. 🙂

    #1117375

    thecashbag
    Participant

    Thanks for the help Christian, but that does not work.

    I also tried adding inline to the class of each individual item, but that also did not work.

    Any other ideas?

    #1117625

    Joao
    Moderator

    Hi There,

    Try putting your icons in text in different text elements.

    and type on the style box of column where your txt elements are placed :

    float: right;
    
    

    Hope it helps

    Joao

    #1118167

    thecashbag
    Participant

    Sorry no that does not work either.

    #1118474

    Rad
    Moderator

    Hi there,

    There could be another elements in between, or maybe line breaks. Would you mind providing your site’s URL that has these icons?

    Thanks!

    #1118571

    thecashbag
    Participant
    This reply has been marked as private.
    #1118618

    Rue Nel
    Moderator

    Hello There,

    Thanks for providing the information. To resolve your issue and display the list icons in this format:

    
    [icon][some text] [icon][some text] [icon][some text]

    Please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

    .x-ul-icons .x-li-icon {
        display: inline-block;
        margin-left: 2.5em;
    }
    
    .x-ul-icons .x-li-icon:first-child,
    .x-ul-icons .x-li-icon:nth-child(1) {
        margin-left: 0;
    }

    If there’s anything else we can help you with, please let us know.