Make product image smaller on mobile product page

Store Design

Topic summary

A user seeks to reduce product image size on mobile devices while keeping desktop images at medium size. A community helper provides a CSS solution targeting mobile screens (max-width: 749px) that adjusts the .product-single__media padding and image object-fit properties.

Key Solution:

  • Add CSS code to theme.scss.liquid (or theme.css depending on theme)
  • Uses @media query to target mobile devices only
  • Adjusts padding-top percentage to control image size (100% default, customizable)
  • Sets object-fit: contain to maintain aspect ratio

Additional Issues Addressed:

  • Multiple users request similar help for different themes (Warehouse, Flex)
  • Common goal: make “Add to Cart” button visible without scrolling on mobile
  • Solutions vary by theme structure; some require hiding thumbnails/carousels
  • Image zoom functionality sometimes conflicts with resizing code

Thread Status:
Ongoing discussion with multiple users receiving customized CSS solutions. Some cases require theme-specific adjustments or staff access for implementation. The core technique remains consistent: mobile-specific CSS media queries to reduce image dimensions while preserving desktop layout.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
3

Hi,

How kind of you! :slightly_smiling_face: :slightly_smiling_face:

www.porlabottles.se

Best regards,

1 Like