Product image cover all the display on mobile

Product image cover all the display on mobile

alemidnight
Tourist
7 0 1

Hello,

I would like to adjust the height of the scroll container for images on the product page on mobile view.
It is too big and it covers all the display so the product name is not showing, as you can see in the following image.
This is my actual store:
IMG_5048.PNG
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
I would like it to look like that:
IMG_5051.PNG

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Please the images should not be cutted off but they always need to adapt to the container.
password is: pwd
 
Thank you!
Replies 2 (2)

DitalTek
Shopify Partner
877 103 121

@alemidnight 

To achieve you can add a short code css to: Admin -> Online Store -> Themes -> Assets/theme.css file

@media screen and (max-width: 749px){
  .product-gallery__media>* {
    aspect-ratio: 3 / 4;
  }
}

 This is result:

VIEKIN_0-1727870207907.png

 

- You can please Like and Accepted Solution if my suggestion helpful.
- And you want to hire developer Theme or App Shopify => Feel free to send me a DM or contact to us via Email | WhatsApp
- Website: ditaltek.com
alemidnight
Tourist
7 0 1

Hello,

Thank you for answering.

This way the name of the product and the price are not showing at first, only when you scroll down