A user encountered an issue with the Palo Alto theme’s Stacked layout where product images were being cut off on desktop viewports, not displaying at full height.
Problem Details:
Solution Provided:
A CSS fix was implemented by adding custom code to the theme.css file:
.product-gallery__media--image classmax-height: 100vh (viewport height)Outcome:
The issue was resolved. The user modified the suggested code slightly (changing max-height to 80vh instead of 100vh) and confirmed it works perfectly for their needs.
Hi, I am trying to solve the following problem:
I am using the Stacked layout for the product page. The problem is that the image in the desktop viewport is ‘cut off’, as you can see in the screenshot.
Any suggestions to make the image adjust to the height of the screen and always be visible in its full height?
Hi,
Please share your product page URL to investigate image cut issue.
Hi @Rony_ShopiDevs ,
Could you please share your Store URL and password (if applicable) so that I can review it and provide you with the appropriate solution code?
Looking forward to your response.
Thanks!
Hi @comeforbreakfas ,
Please send the website link, I will check it for you
Hi! here it is: https://comeforbreakfastdev.myshopify.com/collections/woman/products/straight-midi-dress
Please send me the store password, I will check it soon
Sure: 123Verde*
Hi @comeforbreakfas ,
Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:
@media only screen and (min-width: 768px) {
.product-gallery__media--image {
max-height: 100vh;
background-color: transparent;
}
.product-gallery__media--image:after {
background-color: transparent;
}
}
Hi @namphan , I changed the max-height to 80vh and it works perfectly!
Thank you very much!!
Hi @comeforbreakfas ,
You’re welcome 