A user is experiencing an issue where slideshow images on a product page display correctly on desktop but get cut off on mobile devices.
Proposed Solutions:
Two community members offered CSS-based fixes:
Solution 1: Add custom CSS code to the theme.liquid file, placed above the </body> tag. A screenshot shows the expected result with properly displayed images.
Solution 2: Apply media query CSS targeting screens under 749px width, changing the object-fit property to contain for the specific slideshow section.
Both solutions involve custom code modifications to adjust how images render on mobile viewports. The issue remains unresolved as the original poster has not confirmed which slideshow section is problematic or tested the suggested fixes.
Hello I am having trouble with my slideshow image showing properly on mobile for the url below https://zenfactr.com/products/joint-back-neck-pain-support-pillow
Does anyone know who to fix it so the image isn’t getting cut off on mobile , it shows up correct on desktop.
Hi @Ecomowner
I see your product page have many slideshow, can you point out which one by a screenshot?
Hey @Ecomowner
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT
If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
if it’s this section:
let try this Custom CSS:
@media screen and (max-width: 749px) {
#shopify-section-template--19205516624102__slideshow_zfeC8Q .slideshow__media img{
object-fit: contain;
}
}