Jump to content

Make buttons same size and distribute them horizontally equally.

Recommended Posts

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!

Link to comment
  • Replies 1
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

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


×
×
  • 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.