Make buttons same size and distribute them horizontally equally.

Hi all, 

I am having a few issues configuring my buttons on the main page (url: https://beagle-bird-9sjz.squarespace.com).

1 - I would like all the buttons to be the same size (height and width). Maybe make them all the size of the bigger button that has the most text? 

2 - After having the buttons all in the same size, I would like to have them distributed equally horizontally. In mobile view, I managed to have equal spacing vertically, but after many tries, I am unable to do this horizontally for the desktop view.

Any help is much appreciated!

Thank you!

You can make the font size and padding the same by making them all "Primary" buttons, you have one that is set to "Secondary. Making them all the same width can be tricky as the setup is based around padding, and therefore the width is determined by the text length plus the padding. You can set a minimum width in CSS but this doesn't always work. Given your design the buttons already overlap on tablet screens and this would be made worse if you made the buttons all a minimum width.

Adding that minimum width would solve the problem of distributing the button spacing equally, but they will overlap at times. You will also need to make the buttons span 4 columns without overlapping. (currently you have them covering 3 4 and 5 columns).

Try this Custom CSS along with the other suggestions.

section[data-section-id="64b332eee118177357ab7a15"] {
  #siteWrapper.site-wrapper .sqs-button-element--primary {
    min-width:160px;
  }
}