I have an Expert package and have been working quite a lot with Elementor for the last 18 months. Recently I followed the Elementor Best Practices tutorial, which was very interesting, and I duly tried what I’d learned with a site still in its finishing touches, due live in 7 days. What I did was instead of the section with 3 columns for my three side-by-side buttons, I created the buttons in a one-column section, inline. I had to use Absolute positioning for them. I have been testing on laptop, ipad 12” and iphone X (as well as Firefox’s devtools viewport emulating environment). I work on a Windows 10 laptop but test on a huge Mac screen, a laptop Mac screen, and some phones. I also test everything on Chrome, Firefox, Safari, Opera and Edge.
I am not going for total perfection because this is for a not-for-profit club and most of its pages are off-limits except to members, but even so, I do aim for perfection in a general way.
The final result is not too bad, except that now the first of the 3 inline buttons is taller than the others, the 2nd one is the shortest of all, and the 3rd one is somewhere between the two in height. These are minimal differences, but *I* can see them! Obviously I’ve checked that the button size (small) and font-size are the same in all cases, with identical button padding values. I’ve trawled through Chrome Devtools AND Firefox Devtools looking for stray formatting that could cause this, but nada! Before I go on Github and report a bug, can someone with more knowledge/experience than I take a look? It’s on https://hacksrus.ch/iwcn-staging and this weirdness is on the home page. I don’t have this config of inline buttons anywhere else.
Many thanks in advance for any help you can give.
Penelope in Switzerland
Best answer by Mark Blair
I think your problem is using percentages in your padding. Because the buttons are different width, I believe you are running into different pixel values being calculated. I changed them all in my inspector to 10px and got them to line up nicely, like this: