Icon List - Alignment - Inline?

[pingram3541]

I thought this was requested before but had a hard time finding it. Is it possible to make an icon list display inline without custom css? Thx

[pingram3541]

After doing a little playing around this is a known quirk of using flex model with inline elements. I found that if you add an option to toggle the elements inline, just also toggle the ul to have following properties:

here is the css output:

Inline - justify right

selector .elementor-icon-list-items {
    display: flex;
    justify-content: flex-end;
}

Inline - justify left

selector .elementor-icon-list-items {
    display: flex;
    justify-content: flex-start;
}

Inline - justify center

selector .elementor-icon-list-items {
    display: flex;
    justify-content: center;
}

And of course the logic should be smart enough to set inline for only specific modes and when not inline for a particular device width, we remove the flex props from the ul and everything works as it does now.

This would give the utmost design flexibility for icon lists both vertical and horizontal. Thanks.

[pingram3541]

Yes, please see my response on the other thread, they are similar yet still individual. Thx - #1601 (comment)

[muzaffarsiddiqui]

Hi,
Very nice tip. It solves my problem too except a little problem. I need to have space in between icon list items. Not the first one and last one.

What will be the css code?

I will appreciate your help.
Thanks
Muzaffar

[sigersmit]

@muzaffarsiddiqui I used:

.elementor-icon-list-item:not(:first-child) {
    padding-left: 10px;
}

This would be a great enhancement!

[maxwellhibbert]

Need this.

[vongoh]

+1. Just realized Elementor Icon List element doesn't have an inline option

[pingram3541]

It's the simple things that take the longest to curate

[arielk]

Done for the next version #3522