That helped but it’s still a little blurry on the laptop. Is there a way to remove the Shopify image resizing completely?
Topic summary
A Shopify theme developer added custom CSS code to section.image.banner.css to display different hero images on desktop versus mobile. After implementation, the desktop image appears blurry, particularly on smaller laptop screens, though it looks fine on larger desktop monitors.
Troubleshooting attempts:
- Modified the
widthsparameter inimage-banner.liquidfrom'375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'to'375, 1200, 2000, 3000, 3000, 3000, 3000, 3000, 3840' - This partially resolved the issue but blurriness persists on laptop displays
Current status:
- The original poster suspects the custom CSS code is interfering with Shopify’s image resizing functionality
- They’ve shared their store URL (cornholeantics.com) and the complete
image-banner.liquidcode for further review - Seeking a solution to either fix the blurriness completely or potentially disable Shopify’s automatic image resizing
Key technical detail: The custom code successfully switches between two uploaded images based on screen size but compromises image quality in the process.