Bedford Homepage Buttons Size Consistency

Hi, so on my website I have 4 buttons under the main menu and page banner. All the buttons are set to Large, however the text inside each buttons varies a lot meaning none of them are the same height. Is there a way to add some filler space to the less text-heavy buttons to make them as tall as the bigger buttons? I've searched under the Button Editor and under the Site Styles but I can't find anyway to adjust this without code. Any help would be appreciated. Here's my website, the buttons in question are below the "I WANT TO": https://www.jklawfirm.net/

Thank you very much.

Hi there.

This requires a bit of CSS and JavaScript to accomplish. Insert the following via sitewide footer code injection:

<!-- Equalize Button Heights -->
<style>
#page-5d7e807d478b13088d7f4ee5 .button-block a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
</style>

<script>
window.Squarespace.onInitialize(Y, function() {(function(){var c=Array['from'](document['querySelectorAll']('#page-5d7e807d478b13088d7f4ee5\x20.button-block\x20a')),d;if(!c['length']){return;}function e(){var f=Math['max']['apply'](null,c['map'](function(g){var h,i;h=document['createRange']();h['selectNodeContents'](g['childNodes'][0x0]);i=h['getBoundingClientRect']();return i['bottom']-i['top'];}));d=c['length'];while(d--){c[d]['style']['minHeight']=f+'px';}};e();window['addEventListener']('resize',e);}());});
</script>

Now that's a bit more than I'd normally do on this forum; I'd normally encourage hiring a coder/developer to solve a problem like this. But I found this particular problem interesting, and I'm curious how many others in the future will find this thread needing something similar.

Do let me know how that works for you.

-Brandon

Note: For the sake of others looking for this question in the future, consider adding ", Equal / Same Height" to the end of the title of your post.