Customising line height in product description on Mobile

Site URL: https://onion-guitar-w3xs.squarespace.com/

Hi!

I inputted some code to re-organise the order of my product description so that the product info sits above the button but now my line height is far too big. I just wondered if there was a way I can amend this and reduce the line height between the header, price & product info? The password for my url is peanutsandpomelo

CODE: @media screen and (max-width:640px) {
section.ProductItem-summary.clear {
   display: flex; 
    flex-direction: column;

}
figure.ProductItem-gallery {
    order: 0;
}

.collection-type-products .ProductItem-details .ProductItem-details-excerpt {
    order: 2;
}
.collection-type-products .ProductItem-details h1.ProductItem-details-title{order:1;}
}

Add to Design > Custom CSS

/* Product space */
@media screen and (max-width:767px) {
h1.ProductItem-details-title {
    margin-bottom: 5px !important;
}
.ProductItem-product-price {
    margin-bottom: 0px !important;
}
.product-price {
    margin-bottom: 0px !important;
}
.ProductItem-details-excerpt {
    margin-bottom: 5px !important;
}
}

Amazing thank-you sooo much! 

On 3/4/2021 at 3:23 AM, amy_knowlton said:

Amazing thank-you sooo much! 

Hi. I see products show 1/4. You can use this CSS to add an arrow slide

/* Arrow slide */
/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
}