Adjust height and padding of Add to Bag, Quantity, Variant and Newsletter throughout my page

Hello there,

I am trying to unify the size of the buttons and fields of the following throughout my sire both on desktop and mobile. Currently it is close but there a some subtle differences.

Is there some code that allows me to adjust height and length and padding of the:
- Quantity
- Variant 1 (size)
- Variant 2 (color)
- Add to Bag button

Additionally I'll like to change the wording on the Variants, currently: "Select Size" "Select color"
Here  is a link to a product page where all these fields and buttons are shown: https://www.lacalifornie.es/all/p/handmade-rattan-fish

Add this code to Website > Website Tools (under Not Linked) > Custom CSS

.ProductItem-details .product-quantity-input input {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.product-details .variant-select-wrapper[data-text] {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

div.sqs-add-to-cart-button {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

Thank you @tuanphan!

This works well but the quantity filed in the homepage https://www.lacalifornie.es does not pick up this code, any idea why?

Also, would you be able to help me with this as well?I'll like to change the wording on the Variants, currently: "Select Size" "Select color" Here  is a link to a product page where all these fields and buttons are shown: https://www.lacalifornie.es/all/p/handmade-rattan-fish

On 1/29/2024 at 4:16 PM, LucyBold said:

Thank you @tuanphan!

This works well but the quantity filed in the homepage https://www.lacalifornie.es does not pick up this code, any idea why?

Also, would you be able to help me with this as well?I'll like to change the wording on the Variants, currently: "Select Size" "Select color" Here  is a link to a product page where all these fields and buttons are shown: https://www.lacalifornie.es/all/p/handmade-rattan-fish

#1. Use this code

input[aria-label="Quantity"] {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

#2. Change these?

Thank you @tuanphan #1 worked!
And yes to #2

You can see this

https://sf.digital/squarespace-solutions/removing-select-from-variant-dropdowns-on-squarespace-71