What is black overflow?
Topic summary
Main issue: Some front-page product images in the Dawn theme appear blurry despite resizing to 2048×2048 (72 dpi). Blurriness is inconsistent; landscape images look blurry while portrait crops look sharp. A specific example is the “kids blue hoodie towel” on hover.
Key context and checks:
- Store link provided: carterandmae.com.au. Helpers asked if this is about the product card and requested the card-product.liquid code (Liquid = Shopify’s templating language).
- One helper questioned if the concern was the homepage banner, suggesting 1920×750 and noting a dark overlay (“black overflow”) that may affect perceived clarity. Screenshots were shared.
Proposed fixes/actions:
- CSS adjustments were made by a helper and they advised updating responsive image Liquid code (shared Shopify article on responsive images).
- Specific code suggestion in card-product.liquid: replace references to card_product.featured_media.width with card_product.media[1].width (per screenshot guidance) to improve image rendering on product cards.
Status/outcome:
- No confirmation yet that changes resolved the issue. Images/screenshots and code snippets are central. Discussion remains open with pending verification from the store owner.