A user is trying to vertically center product images in their gallery on a Shopify store. The images currently appear misaligned, creating an inconsistent visual layout.
Proposed Solution:
object-fit: fill property to adjust image alignmentCurrent Status:
The suggested CSS solution did not resolve the issue. The user reports that images remain unchanged after implementing the code, as shown in their follow-up screenshots. The problem persists and requires further troubleshooting or an alternative approach to achieve proper vertical alignment in the product gallery.
Does anyone know how I can align the images on product page gallery so they are all centered vertically?
Product url example is: https://rsabventures.com/collections/new-items/products/aries-a-411-heavy-duty-16-gauge-agc-in-line-fuse-holder-w-3-amp-fuse
Any help or advice is appreciated.
Thank you,
Brad
Then find the style.css file.
Then add the following code:
.grid-view-item__image-wrapper img, .product-single__photo--has-thumbnails figure img {
object-fit: fill;
}
Then press ‘Save’ to save the code.
Here is the result you will achieve:
Good luck! If you find this answer helpful, please press ‘Like’ and mark it as ‘Solution’. Thank you.
