Remove the Unwanted Extra Space Under Your Icons in Elementor - WordPress
The CSS required to do this is pinned 📌 to the top comment.
What I use to build amazing websites:
Elementor (the best WordPress page builder): https://be.elementor.com/visit/?bta=2...
Awesome, affordable hosting (the server your website needs to exist): https://www.hostg.xyz/SHBd2
🧙 Wizards of Webcraft – A series where I’ll be reviewing your websites - https://www.reialesa.com/wow/ Apply now!
In Elementor, icons always have a gap at the bottom. Just a little bit of extra, unwanted space that can make everything more difficult to align correctly. And, if you upload custom icons, the menu widget has the exact same problem with the mobile dropdown. The icon has some extra space on the bottom and you can't get rid of it by styling the toggle button. You might have tried to remove it with varying degrees of success by using negative margins or other methods. It's a tiny thing, but it's very annoying.
We're going to go over how to remove it with just a few lines of CSS. It's incredibly easy and you have multiple options. You can either target a specific icon, use classes to target multiple icons or even remove the issue on the whole website instantly. And for the hamburger menu icons you also have several options. You can simply remove the gap, but you can also remove the padding and the background color, which will give you perfect control over the icons' sizes.
#icon #padding #elementor
Get in touch:
https://www.reialesa.com/youtube/
Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.
Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!
