Product Photo stretch now Until Grid Border but the horizontal product photos stretch wrong.

Topic summary

A user is experiencing image stretching issues on their Shopify store (Baseline theme) after implementing CSS code to fix white space at the bottom of product photos on collection pages.

Initial Problem (Problem 1):

  • Product photos on collection pages weren’t stretching to grid borders, leaving white lines at the bottom

New Issue Created (Problem 2):

  • After applying the fix, horizontal product photos on individual product pages became vertically stretched and deformed
  • The issue particularly affects products with 7 photos versus 6 photos
  • Color variation photos are also displaying out of dimension

Resolution Progress:

  • PageFly-Victor provided multiple CSS code iterations to address the issues
  • The main horizontal photo stretching was resolved
  • However, persistent problems remain with:
    • Some color variation photos still appearing stretched
    • White space around certain product images (specifically on the black t-shirt product page)

Current Status:
The discussion remains ongoing as the user continues to identify edge cases where horizontal images aren’t displaying correctly, requiring further CSS refinements.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.

Perfect, that worked. Thank you so much!