Please do some adjustment for resolving this issue. Ideal optimized layout also attached for reference
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(ortheme.cssdepending on theme) - Uses
@mediaquery to target mobile devices only - Adjusts
padding-toppercentage to control image size (100% default, customizable) - Sets
object-fit: containto 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.
