How to change Add to cart button size on collection page (Horizon Theme)

[TPennell]

Hi,

How do I change the add to cart button size to make it smaller? OR how do I just make it smaller on mobile? when views on mobile the button is cut off due to the size. Below is a reference photo from dekstop. 

[Betterave-Nina]

Hi @TPennell. Welcome to the Shopify Community!

It can be done with an additional CSS rule. Can I see an URL with the button?

[TPennell]

Hi,

Thanks for your reply 

www.deckstar.co.uk

pokerphone

[Betterave-Nina · Accepted solution]

Hi @TPennell.

You can add the following code at the bottom of your base.css 

@media screen and (max-width: 749px) {
	.product-form-buttons > *:not(.quantity-selector) {
	  flex: unset!important;
	  margin: 0 auto!important;
	}
}

The result should be:

I hope this helps!

If your question was answered, please mark it as an Accepted Solution

[TPennell]

Lovely stuff Nina,

just for future proofing - Do you know of a way to adjust the size with a percentage? just incase, in future, I wish to play around with it a little more? If not, no problemo! 

(Below example if in future, I wanted 2 per line etc)

[Betterave-Nina]

Glad that it helped!

This is a flexbox, you can't really adjust it with percentages. Once the issue pops up, just post it on the forums, it won't be difficult to solve 🙂

[TPennell]

Great stuff - Appreciate your time and help

[Betterave-Nina]

Anytime! Glad I could help!

[Dan-From-Ryviu]

Hi @TPennell 

Could you share the link to your store? 

[TPennell]

Hi,

Thanks for your reply 

www.deckstar.co.uk

pokerphone

[GTLOfficial]

Hello @TPennell 
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.product-form-buttons button {
width: 80%;
margin: 0 auto !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[TPennell]

Hi GTL,

thanks for the reply.

Have entered this in the base.css as below, saved and nothing has changed. Apologies if I am missing something.