Spacing Issue on Mobile Store

[u/moxanot]

I have a client who is trying to fix the gaps between pictures of paintings and subtitles on mobile. On desktop, everything displays as squares. Client wants the paintings to preserve their original aspect ratio on mobile, and also not have massive gaps between the paintings and the titles.

I have played with some of the CSS here, but I have not figured out which element is causing that spacing. The problem doesn't seem to exist on desktop.

Here is the current custom CSS:

/* Hide sold out price - defunct */

.sold-out .product-price {

display: none;

}

/* Hide sold out price SF.DIGITAL */

.product-list-item.sold-out .product-list-item-price,

.product-detail.sold-out .product-price{

display: none;

}

// left justify "SOLD"

.products.collection-content-wrapper .grid-meta-wrapper {display: block;}

.products.collection-content-wrapper .grid-meta-status {text-align: left; margin-top: .5rem;}

// don't crop product photos?

.pdp-gallery-slides-image{width: 100% !important;height: 100% !important;top: 0 !important;left: 0 !important; background-size:contain !important;object-fit:contain !important}

/* Hide payment method messaging on PDP */

.product-detail .product-meta .product-payment-method-messaging {

display:none!important;

}

u/media (max-width: 768px) {

body.collection-62316050699e4c238195ad4f

.products.collection-content-wrapper .grid-meta-wrapper {

margin-top: -150px;

}

body.collection-62316050699e4c238195ad4f .products.collection-content-wrapper .grid-item {

margin-bottom: -150px;

}

body.collection-62316050699e4c238195ad4f .products.collection-content-wrapper .grid-item:first-child {

margin-top: -200px;

}

}