Product image media fit issues

Shopify Discussion

Topic summary

A user is experiencing product image display issues on their Shopify store (lumokitty.com).

Problems identified:

  • Images move around during scrolling on mobile devices (desktop view works correctly)
  • User wants to reduce image size on both desktop and mobile views

Solution provided:
Add custom CSS code to the theme’s Custom CSS section (Online Store > Themes > Customize):

@media (max-width: 749px) {
.slider__slide { overflow: hidden; }
}

This CSS targets mobile devices (screens under 749px width) and prevents image overflow in slider elements. The image resizing question remains unaddressed.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

On desktop view its fine but on mobile, the picture moves around when trying to scroll. How do I fix this?

Also how can I make the image itself smaller for both desktop view and mobile view?

Website URL is: lumokitty.com

1 Like
2

You can add this code to Custom CSS of that section on Online Store > Themes > Customize

@media (max-width: 749px) {
.slider__slide { overflow: hidden; }
}