jklawfirm Posted October 21, 2019 Share Posted October 21, 2019 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
brandon Posted October 21, 2019 Share Posted October 21, 2019 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. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.