Images on desktop not showing while on mobile yes (Impulse theme)

Store Design
, , ,

Topic summary

A user encountered an issue where product images displayed correctly on mobile devices but remained invisible on desktop, despite being present in the DOM (dragging revealed them temporarily). The problem was traced to CSS code affecting image opacity.

Root Cause:
Custom CSS in assets/theme.css was missing a closing curly brace before a media query rule. This syntax error caused the mobile-specific rule .product-block img { opacity: 1 !important; } to apply only to mobile viewports, leaving desktop images with zero opacity.

Solution Provided:
Multiple users offered fixes:

  • Add .product-block img { opacity: 1 !important; } as custom CSS
  • Insert specific code above the </body> tag in theme.liquid
  • Correct approach: Fix the missing closing brace } before the @media (max-width: 768px) rule in the CSS file

Status: Resolved. The user confirmed images now display properly on desktop after implementing the fix.

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

On my store, in product description the images aren’t showing, but on mobile they do. When i look at the product page on desktop and grab the images place the image is showing but when i release it continnues to be invisible. What is the problem? I’m using impulse theme
Heres the website link for a product page in my site: https://volacie.com/collections/haut/products/elitevest

2

Desktop image opacity zero so can add custom css

.product-block img { opacity: 1 !important; }

fg.png
fg.png1919×880 261 KB

image (1).png
image (1).png1919×880 264 KB

3

Hey @kakas13

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1717592361560.png
Moeed_0-1717592361560.png1831×839 163 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

You have added some CSS rules, but missed the curly brace. Inn your assets/theme.css there is this code:

@media (max-width: 768px) {
.product-single__meta {
    text-align: left;
}
  
.sales-point .icon-and-text {
    justify-content: left;
}

.product__price.on-sale {
    font-weight: bold !important;
  font-size: 26px !important;
  color: black !important;
  text-decoration: none !important;
}

.product__price--compare{color: #7a7a7a;}

.product-block img { opacity: 1  !important; }

Last line makes your images show on mobile.

But I think you’ve missed the closing curly brace before .product__price.on-sale { line, it should be like this:

@media (max-width: 768px) {
  .product-single__meta {
    text-align: left;
  }
  
  .sales-point .icon-and-text {
    justify-content: left;
  }
} /* this one was missing */

.product__price.on-sale {
    font-weight: bold !important;
  font-size: 26px !important;
  color: black !important;
  text-decoration: none !important;
}

.product__price--compare{color: #7a7a7a;}

.product-block img { opacity: 1  !important; }
1 Like
5

Thank you so much its working now!

1 Like