How can I fix product image issues on mobile and desktop views?

Topic summary

A user reports severe product image display problems on their Shopify store, particularly affecting mobile views where images are not visible at all. One specific product has unique coding issues causing different behavior than other products.

Main Issues:

  • Images completely invisible on mobile view
  • Other product images are too large and don’t fit properly in their containers on both mobile and desktop

Proposed Solution:
A respondent suggests adding CSS code to the theme-style.css file:

img{
max-width:100% !important;
}

This CSS rule would constrain all images to fit within their parent containers by limiting maximum width to 100%. The discussion includes product URLs and a screenshot reference, though some text appears corrupted or reversed in the original post. The issue remains unresolved pending implementation of the suggested fix.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.

My product page images are disaster can soemone fix it , in mocile view : we cant even see the pic .

this product image has coing problem thereore is different then products

https://theoutletgo.com/collections/viral/products/creative-note-board-creative-led-night-light-usb-message-board-holiday-light-with-pen-gift-for-children-girlfriend-decoration-night-lamp?variant=44335012053265 and

those other products image are too big , can you make it small and fit in box for mobile , and desktop view

https://theoutletgo.com/collections/viral/products/cup-washer-with-sink-home-bar-counter?variant=44335008350481

1 Like

Find theme-style.css.

img{
max-width:100% !important;
}

or