When you add Icon Boxes – depending on the content they will have differing heights.
We can fix that with:
.elementor-icon-box-wrapper {
height: 420px;
}
Same Height Icon Boxes Solution – Elementor WordPress Tutorial
Hire us to work on your Website! info@websquadron.co.uk or visit
Get Elementor Pro:
Get Elementor Cloud Hosting:
Support us:
Mastery Membership:
Indeed we’re affiliated to them, but it helps to pay for resources to keep creating ace content for you 🙂
Equipment Used:
Softbox Lighting Kit (to focus main light onto me in a dark room):
Soundproof Panels (to provide a dark setting, and prevent sound bounce):
3m Ethernet Cat 7 Cable (to maximise the Internet Connection as the room is upstairs):
Anker 6 in 1 Adaptor (for the Macbook Air to increase USB-C, USB-A, HDMI, Ethernet Ports):
USB-C to Lightning Port Cable (from my iPhone to my Macbook Air):
Powerline Adaptor (boosts internet connection from downstairs 380mbs to the upstairs room 120mbs):
Floodlights (positioned to glow onto the walls):
LED Light stands (either side of me):
Fifine Dynamic Microphone:
Floating Shelves:
Hanging Pendant Light Holders:
Vintage Light Bulbs:
Music used:
Track: Will You Be Mine (Remix)
Free download:
Artists:
Contact:
Music provided by Audio Library Plus
— Get Elementor Pro here —-
— Of course, we’re affiliated to them, but it helps to pay for resources to keep creating ace content for you 🙂
— Book an Appointment/Consultation:
— LinkedIn:
— Instagram:
— Twitter:
— Facebook:
PS:
PPS: Contact us at info@websquadron.co.uk
PPPS: We only build with Elementor Pro
Straight forward video and thanks for including the CSS code in the description. Subscirbed.
Is there a way to do the same in elementor free version? The custom CSS is a Pro version
Awesome video, exactly what I searched for!
Thank you for the guide it works
Unfortunately this does nothing for me. The boxes stay in the same different lengths
👍
Its only work for any container first child container !!!!!!
It seems that the custom code gets associated with all the boxes if used again. How do we go about dealing with another box within the same website with the same code? Do we change the name?
Is something missing from the CSS code? It's not working for me.
Great and elegant solution. Thanks ! But how to adapt for mobile? BEcause this solution seems to be not good for responsiveness
Thanks!
It works, but I need it to work only for tablet – how to manage that? What to add to the code?
When you go into mobile responsive mode they will be listed one after each other (vertical) Can you display the horizontally and if yes, how?
Why use CSS code, when u can do the same with Elementor free?
Awesome tip, thank you!
Have been struggling with this most annoying feature for quite some time, thanks a bunch
Can I suggest if you can make the tutorial for the Custom Listing Boxes, where you have Title, Text and Button and so all the listing Boxes are the same height and the elements are on same level. As if it's not a problem to make box the same height, but a lot of post in Elementor Group is about how to make the elements on same Level / Lined up to each other. So, Title is always on Top, that ok… then goes the Text… and if one text is shorted than another text in another box, the Button that goes after text is not in the same line between those two boxes.
Also, preferably, the box height in same row need to be as hight as biggest box, not fixed height.
I just learned something. Thanks for sharing.
why are you setting the background color in the widget advanced tab rather than the column background color the widget is in?
I think I found an easier method where you don't have to specify a fixed height for the icon boxes. I had intended to share it on one of the live chats previously but it skipped my mind.
On the parent column or container, add the custom CSS:
selector .elementor-widget-container{
height: 100%;
}
It'll also eliminate the need for media queries
Awesome tip make 1:26 saves you. As was coming for you before that. Lol I am joking obviously 🙂
Great tip! Please do a tutorial on how to set different parameters (height) for tablet and mobile.
Imran, thank you for this video. I was having problems with this issue a few years ago and ended up spending $$$ for a plugin that barely worked. This is a much better solution.