Product Picture Not Correctly Showing

[NinoB97]

Hello on my MOBILE website https://auraliving.nl/ + https://auraliving.nl/products/flame-aroma-diffuser-deluxe

I have a product at the top which is currently not showing the photo / product correctly, as u can see in the photo below its cut out at the left side which makes it clunky and incomplete, i tryed to fix this and the orginal photo i use doesnt look like this but since its portraited it gets this look, can somebody resize / fix / code it so it will show properly ? i post the website and the orginal picture below. thanks guys.

[BSSCommerce-B2B]

Hi @NinoB97 

Can you kindly share the details of your problem (screenshot/ record) with us? We will check it and suggest you a solution if possible.

[NinoB97]

u can see it in the above picture and on the website, the left side of the black product is cut and i dont know why cause am using the one u see its fully sized

[Dan-From-Ryviu]

Hi @NinoB97 

Please change the settings of that section to Square or Adapt to image to solve your issue 

[Sweans · Accepted solution]

Hi @NinoB97 ,

Thank you for sharing the details of the issue you're experiencing with the product images on your mobile website. It looks like the images are being cut off, which can indeed make them appear clunky and incomplete. To address this, you can adjust the object-fit property to ensure the images display correctly without being cropped.

Here's a step-by-step guide to help you add the necessary code to your theme.liquid file:

Step-by-Step Instructions

1. Log in to Your Shopify Admin:
• Go to your Shopify admin dashboard.
2. Navigate to Online Store:
• In the left-hand sidebar, click on Online Store.
3. Access the Theme Code Editor:
• Under the Themes section, find your current theme and click on the Actions button.
• Select Edit code from the dropdown menu.
4. Find the theme.liquid File:
• In the Layout folder on the left side, click on theme.liquid to open it in the code editor.
5. Add the CSS Code:

For the Homepage

Add the following CSS code within the <style> tag or create a new <style> tag if it doesn't exist:

.card__media .media img {
    object-fit: contain;
}

For the Product Inner Page

1. Also, add this CSS code:

img.image-magnify-hover {

    object-fit: contain;

}

Save Your Changes:

• Click the Save button in the top right corner to apply the changes.

Explanation

• object-fit: contain;: This CSS property ensures that the images are resized to fit within their containers while maintaining their original aspect ratio. This prevents them from being cropped or distorted.
  
  

I hope this helps! If it does, please like it and mark it as a solution!
If you need further assistance, feel free to reach out!

Regards,
Sweans