Center align Icons and title text – Advanced Tabs

  • Resolved planetboris

    (@planetboris)


    1 year, 3 months ago

    Hi, I attached 2 screenshots to illustrate an alignment issue with icons and titles for the Advanced Tab widget. As you can see in the screen shots I have been able to center the text of the title with the icon. I do this with HTML within the text field. But this creates unnecessary bloat and it gets flagged by page speed test as excessive use of HTML. Do you have a solution to center the titles with the icon? All of the settings in the widget make adjustments to the icon and the text together, not separately. Id there CSS to accomplish this. This would be a better solution than filling up the text field with HTML(This link shows the Icons and title without the HTML code in the text field: Its only a few pixels up off center, 4 04 5 pixels, but I want to make it as centered as possible.

    ( https://www.mokouzin.com/songslyrics-2/ )

    2 SCREENSHOTS: https://postimg.cc/gallery/XVGyhnJ

    Thanks and best regards

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Amit Paul

    (@paulamit)

    Hi @planetboris,

    Greetings. Hope you’re doing good.

    Really sorry for the delay in reaching you. Thanks for sharing the details with screenshots. I have just checked your site and it seems you have different CSS customization for different screen responsive mode. Well, I think you can use this below CSS to solve the alignment issue.

    @media (max-width: 1024px) {
  .elementor-39263 .elementor-element.elementor-element-3e696fc .eael-tab-inline-icon li .title-after-icon {
    margin-top: auto !important;
  }
}

    You can easily apply custom CSS by following this documentation: https://essential-addons.com/elementor/docs/faq/apply-custom-css-elements/

    Let me know how it goes then. Thank you!

    Thread Starter planetboris

    (@planetboris)

    Hi Amit, absolutely no problem, thanks very much for the css, that’s excellent! I will try it out after the holidays and report back. This will help alot, will be good to reduce all that HTML I just need o change the media query to min-width as this will be deployed on tablet, lap and desktop. Wish you and your great team Happy Holidays! *cheers

    Plugin Support Amit Paul

    (@paulamit)

    Hi @planetboris! Sure, no worries. You’re always welcome.

    Cheers!!

    Plugin Support Amit Paul

    (@paulamit)

    Hi @planetboris,

    Hope you’re doing well.

    Would you kindly give us feedback about the issue that you’re facing? Is it fixed? please let us know. Because We couldn’t find any Support Mail from you also.

    Thank you!

    Thread Starter planetboris

    (@planetboris)

    Hi Amit, I didn’t know you were waiting for feedback, based on my last response. Also we just finished our holidays here. If you want to know if the solution worked I can certainly advise you once I have implemented the css you provided, which I have not initiated yet. I will keep you posted. Thanks for your follow up. Cheers

    Plugin Support Amit Paul

    (@paulamit)

    Hi @planetboris,

    Good day! Thanks for your reply back. Are you able to try the above CSS? And check how it works then? Kindly, let us know the update then.

    Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Center align Icons and title text – Advanced Tabs’ is closed to new replies.