How to resize quantity selector on Sense theme?

[tbdezign]

Hi everyone, I need help reducing the size of the quantity selector, here’s a product link - Signicade® A-Frame Sign – TBDezign Studio

Can anyone please advise on how I can do that?

[NerdCurator]

@tbdezign Thanks for reaching out to Shopify community with your concern. Can you please confirm if you require the quantity selector like this on the screenshot? Once confirmed I can provide the CSS code for the following. Thanks

[tbdezign]

Hi, yes!!
That is good

[AnneLuo]

Hi, @tbdezign
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
.price-per-item__container .quantity {
  width: calc(12rem / var(--font-body-scale) + var(--inputs-border-width) * 2) !important;
  min-height: calc((var(--inputs-border-width) * 2) + 3rem) !important;
}
</style>

Results:

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.

[Dan-From-Ryviu]

You can add this code to Custom CSS in theme settings.

.product__info-wrapper .quantity .quantity__button {
    width: 3rem;
}
.product__info-wrapper .quantity {
    width: 10rem;
    min-height: 4.5rem;
}

Best regards,
Dan from Ryviu: Product Reviews App

[tbdezign]

It worked!
Thank you very much for your help

[AnneLuo]

Hi, @tbdezign

You are welcome. I’m glad to hear that the solution worked well for you.
If you require any more help, please don’t hesitate to reach out.

[tbdezign]

I would like to know if it’s possible to move the price so it’s side by side with the quantity selector, is that possible? Should I open a new topic on it?

[AnneLuo]

Hi, @tbdezign
You are welcome. Please don’t forget hit Like and Mark it as solution!