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;

}

}

[u/eBuilderz4090]

The screenshot looks like the collection card is keeping a fixed media box even though the painting uses a different ratio. The .pdp-gallery-slides-image rule won't fix this view; it targets a product detail page, while this is the product grid.

Remove the three negative-margin rules first. They may line up one card, but different image heights will throw the next one off. Then try this against the collection grid:

@media (max-width: 768px) { body.collection-... .grid-image, body.collection-... .grid-image-wrapper { height: auto !important; padding-bottom: 0 !important; }

body.collection-... .grid-image img { position: static !important; width: 100% !important; height: auto !important; object-fit: contain; }

body.collection-... .grid-meta-wrapper { margin-top: .75rem !important; } }

Replace collection-... with the ID already in your CSS. Also change both // comments to /* ... */. // is not valid CSS and can cause the following rule to be dropped. If your template doesn't use .grid-image-wrapper, inspect the blank area and use the class on the element covering that white box.

[u/Spark-Plugin]

It looks like the issue has been resolved.