Product image not showing on mobile

Topic summary

A user reports that product images are not displaying on the mobile version of their Shopify store (aromaticaparfum.com).

Solutions Proposed:

Two community members offered CSS fixes to resolve the mobile display issue:

  • Solution 1: Add CSS code to the assets > stylesheet.css file targeting grid blocks with a max-width media query of 980px
  • Solution 2: Navigate to Online Store > Themes > Customize > Theme settings > Custom CSS and insert CSS targeting screens with max-width of 749px, specifically addressing product section images and slider float properties

Both solutions involve adding custom CSS media queries to adjust image display behavior on mobile devices. The discussion includes code snippets and screenshots to guide implementation.

Status: The issue remains unresolved pending the original poster’s implementation and feedback on the suggested fixes.

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

I am unable to see my product images on mobile version. My website is aromaticaparfums.com

Hello @aromaticaparfum put this css in assets > stylesheet.css

@media screen and (max-width: 980px) {
.gridlock .row .desktop-12 {
width: 100%;
}
}

1 Like

Hi @aromaticaparfum

Please go to Online Store > Themes > Customize > Theme settings > Custom CSS, add this code, and save

@media (max-width: 749px) {
.product__section-images #slider {
    float: unset !important;
}
}