How do I reduce padding between elements in product blocks?

Site URL: https://abba.squarespace.com/gallery

@tuanphan = King of CSS

Trying to tighten everything up on my store page... If you look at the image, I like how close the "quantity" and "add to cart" buttons are. Now I'd like the titles and prices to be spaced similarly. The image above each product block is a code block and not part of the product block. I'd like those to be closer as well (perhaps if I can edit the top and bottom padding for product blocks as well)

I have this pattern repeated hundreds of times, so hopefully it's code I can use site-wide. THANK YOU SO MUCH for your continued help. wow wow wow!

Hi,

It looks like you solved?

Also, the title on mobile is very small. Do you need to increase it?

@tuanphan I got the price closer to the title but now I'd like the quantity and "add to cart" button closer to the price... I just want it very compact in other words.

also yes, it's way way too small on mobile

Hi. Can you share access password?

@tuanphan the password is: yes

Add to Design > Custom CSS

/* space quantity - price */
.product-block .productDetails .product-price {
    margin-bottom: 0px;
}
/* product title size mobile */
@media screen and (max-width:767px) {
a.product-title {
    font-size: 18px !important;
}
}

@tuanphan THANK YOU AS ALWAYS! How do I target the add to cart button and the title of the product? I'd like to change attributes like size, color, and padding.

Thank you for always helping me. I can't tell you how much I appreciate it!

23 hours ago, elijah_aaron said:

@tuanphan THANK YOU AS ALWAYS! How do I target the add to cart button and the title of the product? I'd like to change attributes like size, color, and padding.

Thank you for always helping me. I can't tell you how much I appreciate it!

Use this code

a.product-title {
    color: red;
    font-size: 30px !important;
    line-height: 30px !important;
}
.product-block div.sqs-add-to-cart-button {
    background-color: red !important;
    border-color: red !important;
    color: white !important;
    padding-top: 20px !important;
    padding-bottom: 30px !important;
    padding-left: 30px !important;
    padding-right: 50px !important;
}