Jump to content

Why are my 'Add to Cart' and 'Submit' Buttons so Big?

Recommended Posts

Why are my 'Add to Cart' and 'Submit' Buttons so Big? When you navigate to this page of my site:  you can see that both buttons are very big. The submit button can be seen at the bottom of the page. 

However, my other buttons in the site are smaller, which is what I want. If you go to this page of my site:  and scroll down, you will see the 'Read More...' buttons are smaller. I'd like to keep all the buttons the same size site wide - this smaller size is ideal. 

I've attached screenshots too. Thanks! 

 

Screen Shot 2023-10-31 at 3.19.03 PM.png

Screen Shot 2023-10-31 at 3.19.20 PM.png

Screen Shot 2023-10-31 at 3.19.25 PM.png

Edited by 2Eyeballs
Link to comment

@2Eyeballs Looks like it's just part of the e-commerce template, but you can try adding this to custom CSS to override and match your other button styles:

div#productDetails .sqs-add-to-cart-button-inner, body:not(.button-style-default).button-corner-style-square .sqs-editable-button {
	font-size: 12px;
}
.collection-type-products .sqs-add-to-cart-button {
	padding: 1em 2.5em;
}

You may want to click around and see if any other button targets need to be added...?

Link to comment

Sure, you can just play around with the font size and padding in the code I sent, for example, try:

div#productDetails .sqs-add-to-cart-button-inner, body:not(.button-style-default).button-corner-style-square .sqs-editable-button {
	font-size: 16px;
}
.collection-type-products .sqs-add-to-cart-button {
	padding: 12px 25px;
}

You can adjust the px of the font size until you find one you like, and then adjust the padding the same way, I suggest using px for padding instead of em like the current template, as em is dependent on font size, where as px will be static/consistent no matter the font size.  

Link to comment

@2Eyeballs actually if the font size is the way you want it on all the buttons, then you can simplify and just try this instead:

.sqs-editable-button, sqs-button-element--primary {
	padding: 14px 25px 10px;
}

The buttons with the larger fonts will still appear larger BECAUSE of the larger font, but the spacing around the font in the buttons will be consistent sitewide.

Note: you may need to add !important to the padding if it's not overriding the current styles, like this:

.sqs-editable-button, sqs-button-element--primary {
	padding: 14px 25px 10px !important;
}

let me know?

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.