Looking for the correct code to align my “products related” section

Solved

Looking for the correct code to align my “products related” section

Lexi123
Tourist
7 0 2

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? 

IMG_7104.png

Accepted Solution (1)

Anshul_arora
Navigator
450 128 93

This is an accepted solution.

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 </body> tag and save.

<style>

.card__inner.color-background-1.gradient.ratio {
height: inherit !important;
}

</style>


[The code will fix alignment of product title/name, price and set size(height/width) for the uploaded product images]


Output -:

Anshul_arora_0-1718688299627.png


I hope the code helps you.


Please share if you have any queries.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 2 (2)

Anshul_arora
Navigator
450 128 93

This is an accepted solution.

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 </body> tag and save.

<style>

.card__inner.color-background-1.gradient.ratio {
height: inherit !important;
}

</style>


[The code will fix alignment of product title/name, price and set size(height/width) for the uploaded product images]


Output -:

Anshul_arora_0-1718688299627.png


I hope the code helps you.


Please share if you have any queries.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Lexi123
Tourist
7 0 2

Omg it worked!!! I was trying to fix this the wrong way.

Thank you so much! ❤️