Increasing Product Image Height only on mobile

[yanetha]

Hi,

I am having an issue on mobile for my site that the product images are too short and do not display the full image.

In the screenshot attached above I would like for the product image to be a little bit longer to show the full image of the product. As it is right now, the image is cropped the original image at the bottom, cutting off some of the product. I am only having this issue on mobile so I would like to only change how it looks on mobile. I do not want to affect how the product image looks on desktop.

The url for my site is https://r4bbit-teeth.com/ and the password to enter is t33th!!

Any help regarding this issue would be greatly appreciated. Thank you

[PageFly-Noah]

Hi @yanetha 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media screen and (max-width: 767px){
.product__media.media {
height: 115px;
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[Anshul_arora]

Hello @yanetha ,

I understand you are looking to fix the issue, so your product image will perfectly display on mobile screen.

Please follow the below mentioned steps to resolve this issue -:

1. Go to Online Store -> Themes-> click on 3 dots -> Edit code.

2. Search for the .css (base.css/style.css/theme.css).

3. Now paste the below mentioned code at the bottom of this css file -:

.product-media-container.media-type-image.media-fit-cover.global-media-settings.gradient.constrain-height {
aspect-ratio: 1/1.5;
}

[ Note : This will perfectly work with the portrait image like you are already using in your site, if you will use other then that you have to again make changes in your css as per that image type. ]

4. Save the changes.

I hope it helps.

Please share if you need any help.

I look forward to your response.