Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #269492

    Antoine
    Participant

    I’ve got a problem with the spacing in an icon list. I’d like to:

    1. Reduce the spacing between the lines of a same icon item list
    2. Align the different lines (there is a small spacing at the moment)

    See the screenshot for more details:

    How to do the change?
    Thanks for your help!

    #269501

    Lely
    Moderator

    Hello Antoine,

    Thanks for giving us the screenshot with clear information of what you want to achieve here. please add the following code in your Customizer via Appearance > Customize > Custom > CSS:

    #x-content-band-1 .x-ul-icons li {
    line-height: 1;
    margin-bottom: 20px;
    }
    

    Hope this helps.
    Thanks.

    #269506

    Antoine
    Participant

    Thanks so much for the really fast response!

    The CSS solves the spacing between the lines (in red on my screenshot) but doesn’t solve the alignment at the beginning of the lines (in blue in my screenshot).

    Do you have another solution?

    #269523

    Lely
    Moderator

    Hello Antoine,

    Please also add the following CSS:

    #x-content-band-1 .x-ul-icons li .x-icon-check{
      margin-left: -10px;
      margin-right: 10px;
    }
    #x-content-band-1 .x-ul-icons li span{
      margin-left: -13px;
    }

    Hope this helps.
    Thanks.

    #269530

    Antoine
    Participant

    It works like a charm. Thank you so much, your support is amazing!

    #269534

    Friech
    Moderator

    Glad we could help, Cheers!

    #282842

    Antoine
    Participant

    I am trying to do some Icon lists with different icons but the spacing between the icons and the words and the alignment of the icons doesn’t work :it works actually fine when I use only the “ckeck” icon, but I’d like to be able to use different icons. Here it how it looks like:

    What should I change to make it work?

    URL: http://www.paleoflaneur.com/discover-paleo/get-started-today/

    #282860

    Thai
    Moderator

    Hi There,
    Please try adding following CSS:

    #x-content-band-1 .x-ul-icons li i{
      margin-left: -10px;
      margin-right: 10px;
    }

    Hope it helps.

    #283598

    Antoine
    Participant

    It works like a charm. Thanks.

    #283839

    Christian
    Moderator

    You’re welcome. Glad we could help.

    #285359

    Antoine
    Participant

    EDIT: I managed to solve the problem I had.

    #285679

    Lely
    Moderator

    Glad that you figure it out.
    Let us know if you have questions in the future.