Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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.

Edited by jklawfirm
for clarity

Share this post

Link to post

1 answer to this question

Recommended Posts

  • 0

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.

Edited by brandon

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

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...