Icon list text too tight

Hi,
I have used an icon list, but the text is too tight and there is no space between the different icon topics.
How can I add more space?

Thank you!

Nimue

Hello NImue,

Tanks for writing in!

If you are referring to Classic Icon List element then please add following CSS under X/Pro > Theme Options > CSS:

.x-ul-icons .x-li-icon {
    letter-spacing: 2px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

Hi thank you Prasant,
but that’s not what I was looking for.
I wanted the space between the different topics ( the vertical distance between each lists different topic elements) to be greater. Not the space between letters. :slight_smile:

Thank You!
Nimue

Hi Nimue,

Thank you for the clarification. To add space between each list, we can use the available Utility Classes. Try to inspect each icon list item. On the class field, add either mbs,mbm, or mbl. Here’s the list of available Utility classes.

Hope this helps.

Hi,
I did this…

But it still looks like this

Just to be sure… I need the space where the red lines are.
Thank you!

Hi Nimue,

The class should not affect the line height of the content. Would you mind sharing the URL where you implement this? We might need to inspect and see the difference on your site. On my install it is working as expected.

No problem! :slight_smile:

https://nimuefichtenbauer.com/?page_id=5123

Hi Nimue,

We can’t access the draft page unless we login on the admin. Please share credentials inside a secure note. Also your site is asking this access, you might need to provide that too:

Yes thank you I did share the info already…although it’s somewhere above!

Hello Nimue,

Thanks for updating the thread.

Can you please confirm the login details? First login is not working. I tried to enter both the details you have shared but it’s not working. Please confirm the login for us to take a closer look.

Thanks.

Hi thank you,

this was my fault…
I changed it now, it should work.
I also renamed the URL too…

https://nimuefichtenbauer.com/people-tox-scan/
thanks
Nimue

Hello Nimue,

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-ul-icons .x-li-icon {
    line-height: 1.2;
    margin-bottom: 15px;
}

Feel free to adjust the bottom margin to have some space in between the list items.

1 Like

THANK YOU very much!!

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.