Issue: On mobile, the product image gallery’s scroll container is too tall and covers the screen, hiding the product title and price. The requester wants images to fully adapt to the container (no cropping) and a layout where the title/price are visible on first view, similar to their reference screenshot.
Proposed fix: A CSS change was suggested to set a 3:4 aspect ratio for .product-gallery__media>* on screens under 749px.
Result: While this adjusts the gallery, the product name and price still do not appear initially and only show after scrolling, so the core requirement isn’t met.
Status: Unresolved/ongoing. An alternative approach is needed to ensure images fit the container and keep title/price visible above the fold.
Notes: The thread includes key screenshots demonstrating the issue and desired outcome, plus a store preview link and password for testing.
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:
I would like it to look like that:
Please the images should not be cutted off but they always need to adapt to the container.
Link is: https://midnightclo.myshopify.com
password is: pwd
Thank you!
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:
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
