The Design with Elementor Course is Now Live!

New Course!

Elementor Icon List Alignment Fix

Read in Dark or Light Mode!

How to align icons to the top of Elementor’s Icon List widget

If you’re like me and the details matter (plus gotta mild case of OCD), then a broken alignment may drive you bonkers too.

For years now, the Elementor Icon List widget has had an alignment issue where if the list text line breaks, the icon is centered on all of the text instead of aligned to the top, where it would look better when the line breaks.

First, here’s a before and example, so you know what I’m talking about:

First step: Add a CSS class

Go to your Icon List widget you want to align the icons to the top, navigate to the ‘Advance’ tab, and add “il-align-top” to the CSS classes (without the parenthesis.)

Second Step: Add the CSS snippet

Here is a CSS snippet to fix the issue and align your icons flush to the top instead of the middle.

Copy and paste this CSS where you are putting all of your CSS (my recommendation is using Code Snippets Pro or just adding it in your Customizer.)

.il-align-top .elementor-icon-list-item {
	align-items: flex-start!important; 
}

That’s it! Enjoy, and keep creating dope designs!

Join the Lytbox Newsletter

Subscription Form - Blog Archive Page

⚡️3 Day Sale! ⚡️

Design with Elementor course

Search

Categories

1 comment

  • FASHIONVIOLATE.CO

    I am truly thankful to the owner of this web site who has shared this fantastic piece of writing at at this place.

Leave your comment


Lytbox Academy Logo

Reset your passord

Want to login? Click here.
Lytbox Academy Logo

Log in to your account

Forgot your password? Reset here.