Issue: The product images and details in the “related products” section on a product detail page were misaligned. The user’s prior CSS for main product images (using object-fit: contain) didn’t apply to the related products area, and they couldn’t identify the correct selector via Inspect.
Solution: A responder provided a CSS-based fix specifically targeting the related products block to align product title/name and price, and to enforce consistent image dimensions (height/width). They instructed adding the CSS at the bottom of theme.liquid before the tag (theme.liquid is the main Shopify layout file).
Outcome: The user confirmed the solution worked and that their initial approach was incorrect.
Notes:
Hello,
I previously used this code:
ProductGridContainer .card__media .media img {
object-fit: contain !important;
for the product page. Now I need to update it for “related products” at the bottom of a single product page. Do you know what I need to change in this code? I right-clicked inspect to look for the proper name but none of them work. Could someone please help?
Hello @Lexi123 ,
I understand you are looking to resolve the Alignment issue of the ‘Product Related’ section in the Product detail Page.
You can fix this issue by using the below CSS code.
Add the code at the bottom of the theme.liquid file before tag and save.
[The code will fix alignment of product title/name, price and set size(height/width) for the uploaded product images]
Output -:
I hope the code helps you.
Please share if you have any queries.
Thank you.
Omg it worked!!! I was trying to fix this the wrong way.
Thank you so much! 
