Resize quantity selector button in checkout page Dawn theme 15v

Shopify Discussion
1

Hiiii

I want to resize quantity selector button in checkout page shopify dawn theme 15v

Please suggest me a way!

check the screenshot

my store link—http://5a3cf5-fc.myshopify.com
WhatsApp Image 2024-08-23 at 13.14.27.jpeg

2

HEY

I want to decrease the size of quantity selector button.

3

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

.quantity {
@media (max-width: 767px) {
& {
width: calc(67px/ var(--font-body-scale) + var(--inputs-border-width)* 2);
min-height: calc((var(--inputs-border-width)* 2) + 2rem);
}
}
}

result

12.png
12.png426×510 46.6 KB

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

4

hey its not working. not changing anything at all

5

heyy this code is not working not changing anything at all

6

Hi @ctal37 ,

To reduce the quantity selector button size, please add the following styles for devices under screen width 640px (max-width value can be reduced based on your required screen size).

Go to your Online Store >> Themes >> Actions >> Edit code >> base.css >> Open it and paste the code at the end of the file.

@media screen and (max-width: 640px) {
     .quantity {
          width: calc(11rem / var(--font-body-scale) + var(--inputs-border-width) * 2); //adjust value '11' as you need
          min-height: calc((var(--inputs-border-width) * 2) + 4rem); //adjust value '4' as you need
     }
     .quantity__button {
          width: calc(3.5rem / var(--font-body-scale));  //adjust value '3.5' as you need
     }
}

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans