New Shopify Certification now available: Liquid Storefronts for Theme Developers

Increasing Product Image Height only on mobile

17 0 1


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 and the password to enter is t33th!!


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

Replies 2 (2)
561 130 130


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>

@media screen and (max-width: 767px){ {
height: 115px;



Hope this can help you solve the issue 


Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

138 28 13

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 -: {
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.

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

For Shopify Design & Development | Custom Coding -Visit Here