Product Image Not Displayed on Particular Products (On ALL Themes)

[chaserchim]

Hi there!

I was about to finish up with some work on my Shopify store, and after changing several things somewhere along the way, the product pages decided to break. Oddly, it displays properly if the window is roughly half of the screen width or less, but if it’s any larger, it disappears completely. It’s consistent across all themes. I’ve checked the images, and they are assigned properly. I’ve cleared the cache. I’ve tried to revert anything I could in the code editor etc, but I couldn’t fix it.

Link here: https://trenuvia.shop/

If anyone could maybe give me a direction to go I would appreciate it.

THANKS!

[tim_tairli]

Wow, that’s the interesting one!

The reason why it happens on some of your product pages, but not on others is because product descriptions there contain the Ingredients part.

You seem to have copy-pasted this part from somewhere else and the problem is that it uses “non-breakable-spaces” instead of normal spaces – see those   symbols:

It effectively makes your Ingredients content a single word.

And here we’re hitting the bug i have never seen before – CSS grid doesn't support word-wrap, overflow-wrap and hyphens properties · Issue #46 · rachelandrew/gridbugs · GitHub

When browser calculates width of the product info wrapper it accounts for the length of this word as if it was not wrapped into multiple lines.
And only then it applies the rule which wraps this long word.

---

You have several options:

1. Edit your product descriptions to remove those non-breakable-spaces. You do not have many products, so this should not be very time-consuming. Also, not doing this may prevent proper indexing of your pages(?);

2. Or – Go to “Edit theme”->“Theme settings”(cog icon), scroll down to “Custom CSS” and paste this code:

/* prevent stretching of grid parents if very long words 
   https://github.com/rachelandrew/gridbugs/issues/46
*/
.text-block.rte * { 
  word-break: break-word;
}

Before /after:

3. The code above may negatively affect other words, and if that bothers you, use this, more complex code:

/* prevent stretching of grid parents if very long words 
   https://github.com/rachelandrew/gridbugs/issues/46
*/
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr minmax(0,1fr);
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: minmax(0,1fr) 2fr;
    }
  }

Finally, it would be great if you go to Horizon theme page in the theme store and leave a review with link to this post – this way Horizon devs should be able to add a fix to future theme versions.

---

if my post is helpful, please like it via ♡ button and mark as a solution -- this will help others find it

[chaserchim]

Wow. Ill check it out when I get home. I never would have found that out myself. Il be sure to let them know.

Thank you so much.