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
Hi @yanetha
This is Noah from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the 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
Hope this can help you solve the issue
Best regards,
Noah | PageFly
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 -:
-
Go to Online Store → Themes-> click on 3 dots → Edit code.
-
Search for the .css (base.css/style.css/theme.css).
-
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. ]
- Save the changes.
I hope it helps.
Please share if you need any help.
I look forward to your response.
