2Eyeballs Posted October 31, 2023 Share Posted October 31, 2023 (edited) 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! Edited April 4 by 2Eyeballs Link to comment
SaranyaDesigns Posted October 31, 2023 Share Posted October 31, 2023 @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...? 2Eyeballs 1 Link to comment
2Eyeballs Posted October 31, 2023 Author Share Posted October 31, 2023 Thank you @SaranyaDesigns ! It works, but at the expense of font size. I want to make my font size in the button bigger while maintaining the same smaller size button. Is there a way to do that? Link to comment
SaranyaDesigns Posted October 31, 2023 Share Posted October 31, 2023 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. 2Eyeballs 1 Link to comment
SaranyaDesigns Posted November 1, 2023 Share Posted November 1, 2023 @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? 2Eyeballs 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment