#129349 Icon list icons alignment

Landing Forums JupiterX WordPress Theme Icon list icons alignment

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • zzzorn

    Since some recent update the icon list widget’s icons started to align to the center (_vertically_) which looks very confusing. How can I align them normally to the top of each item, as they used to work?

    Amir Rather Support Team

    Could you please send over your administrative WordPress access(in a private reply) so we can check what might be going on in the backend? We’ll need permission to debug this.

    Private
    zzzorn
    This reply has been marked as private.
    Amir Rather Support Team

    I added the below CSS in Customize > Additional CSS please check now:

    .elementor-icon-list-icon {
        margin-top: -24px;
    }
    body .elementor-icon-list-icon i.fas.fa-check {
        margin-top: 24px !important;
    }

    Regards

    zzzorn

    Hi there,

    It is not a working solution.

    1. Check navigation top bar. The CSS moves the icons out of place also there
    2. you simply cannot use fixed amount like -24px, as the list item lenghts vary. Not all list items have icons at the right place, only those with 1-2 lines of text The icon needs to be aligned to the “top”, now it is aligned to “center”.
    3. As you seem to try to fix this with a counter css, there is indeed a bug in jupiter x and when you fix this bug this css will break the icon lists at that point (though if you want to use this solution, I can remove the css when you really fix the bug)

    There seems to be a rule which does this vertical centering of icons:

    .elementor-widget .elementor-icon-list-item a { align-items:center;

    Somehow I wasn’t able to override it by setting align-items:top; (this works in chrome developer tools but when I enter it on custom css, it doesn’t work for some reason. Maybe you can find the proper selector / code?

     

    Mohsin Al-Rabieai Support Team

    Hi there,

    I doubt that it’s a Jupiter X theme issue as the Icon List is an original Elementor widget. What I can see now, is that the icon list is now having the flex display and this particular issue can be a bug that will be soon reported to the Elementor and will be fixed or have an option to set the position of the icons vertically.

    For now, I believe it is missing this CSS fix:

    .elementor-widget .elementor-icon-list-icon {align-self: normal;}

    It will align the icons to the top. You may align the icons by adding a 5px margin to top of them:

    .elementor-icon-list-icon {
        margin-top: 5px;
    }

    Best regards

    zzzorn

    Thanks,

    this is working perfectly, hooray!

    Mohsin Al-Rabieai Support Team

    Glad to hear that it’s fixed 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
You must be logged in to reply to this topic.
Login