Jump to content

Bedford Homepage Buttons Size Consistency

Recommended Posts

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.

Link to comment
  • Replies 1
  • Views 298
  • Created
  • Last Reply

Hi there.

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

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

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);}());});

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.


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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.