My image dissapears in the feature product section (mobile)

Shopify Discussion
, , , ,

Topic summary

A Shopify store owner encountered an issue where product images displayed correctly on desktop but disappeared on mobile devices in the featured product section.

Root Cause Identified:

  • A <div class="product__media-badge-container"> wrapper element was interfering with the product media gallery on mobile
  • This wrapper prevented images from rendering properly on smaller screens

Solution Provided:

  • Add custom CSS to the section: .product__media-badge-container { width: 100%; }
  • Alternatively, remove the wrapper element entirely if not needed

Resolution:
The issue was successfully resolved using the CSS fix. The problem stemmed from theme customizations affecting the product media display.

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

Hey there,

I hope everyone is doing alright. I have an issue with my feature product section. While on my computer, the image is visible, the moment I check it on mobile, the image disappears. Why? Can I fix it with code or something else?

Here is an image:

desktop
desktop1920Ă—1131 85.3 KB

mobile
mobile758Ă—1050 55.8 KB

My website URL is: https://kraftio.bg/

Thanks in advance! Have an amazing day!

Best,
Krafito

1 Like
2

Your product media gallery is modified, there is a
<div class="product__media-badge-container"> element which wraps you product media.

Screenshot 2025-08-24 at 12.00.47 AM
Screenshot 2025-08-24 at 12.00.47 AM1068Ă—384 65.5 KB

If I remove this wrapper, the images shows fine:

Screenshot 2025-08-24 at 12.01.47 AM
Screenshot 2025-08-24 at 12.01.47 AM1068Ă—384 172 KB

If, however you do need this element, try adding this to the sections “Custom CSS”:

.product__media-badge-container {
  width: 100%;
}
3

Gosh… @tim_1, you are amazing. Thank you so much. The problem is finished.