Using buttons inline produces odd change in button size

  • 25 July 2021
  • 5 replies

Hi everyone

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 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 25 July 2021, 23:18

View original

5 replies

Userlevel 4
Badge +1

You are very welcome!

Percentages are weird when it comes to padding & margins. I believe they both work off of a percentage of the width of the parent element. What was happening in your case was, that even though the percentages were equal, the wrappers for the buttons were a different width due to the length of the text.

Had the label text of one of your buttons been “Supercalifragilisticexpialidocious”, you would have had a whole lot of padding :-)

Well, once again, THANKS! I have been busily scouring my site and removing occurrences of % padding before they cause problems in the future.

Userlevel 4
Badge +1

You are very welcome!

Percentage padding isn’t always bad -- sometimes they can be useful as it builds in a responsive aspect to the design. For example, if I had an image that was going to be sizing down or up as the columns shrink or collapse, I might use percentage padding to get a proportionally sized padding area.

In your case, “em” or “rem” might also be useful options for the padding as they are based on the size of the fonts you are using. That way, if you change the font-sizes at different resolutions the padding will shift in a relative way.

Userlevel 4
Badge +1

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:


My gosh, who knew percentages would do that? I use them a lot to ensure responsiveness, and did wonder briefly if that was something to do with the issue, but it just seemed too oddball!


Thank you SO much for this!