Reduce the size of 'ADD TO CART' button on collections (in mobile view)

[RaghavGoel1]

Hi all, 

I was able to add a custom code to reduce the size of my 'add to cart' text. However I want to reduce the height of my add to cart button so that its thinner and matching with my text size. 

Please see the attached screenshot:

I want the height of the buttons to be reduced.

Link to my store - https://f40566-d3.myshopify.com/

Would be grateful if someone could assist please 🙂

[DanCodes · Accepted solution]

1. Go to Online-Store

2. Edit Code

3. Go to assets

4. Open 'quick-add.css'
5. Add style

.quick-add__submit.button.button--full-width.button--secondary {
@media(max-width: 991px) {
min-height: 20px;
}
}

[RaghavGoel1]

Thanks Danos! Worked well - have a good day 🙂

[ritu_soni]

Hi @RaghavGoel1 ,
Please go to base.css and add the following code:

.button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded {
    min-width: calc(12rem + var(--buttons-border-width)* 2);
    min-height: calc(2.5rem + var(--buttons-border-width)* 2);
}

 

[RaghavGoel1]

Hi Ritu, thanks for the solution, however, this did not seem to do the job. The buttons still look the same. 

Also, FYI this is the code I've used in section custom CSS to reduce font size and some other features- 

.quick-add__submit.button.button--full-width {
background-color: #ffff !important;
color: #056172 !important;
font-weight: 600;
font-size: 10px !important;
}