On mobile view?
Only desktop is working for me not mobile
Topic summary
A Shopify store owner using the Dawn theme is experiencing blurry banner images on mobile devices, despite having already improved desktop image quality through custom code.
Initial Solutions Attempted:
- Uploading higher resolution images (suggested but didn’t resolve the issue)
- Modifying the
image-banner.liquidfile by changing theassign widthsvalues to include larger dimensions like ‘3750, 3000, 2400, 2000, 1500, 1100, 750’ - Multiple iterations of width adjustments were tested but continued to show blurry results
Resolution:
The original poster eventually solved the quality issue by re-saving the image in Photoshop, which significantly improved clarity.
Secondary Issue - Clickable Link:
After the image quality fix, the banner lost its clickable functionality. This was resolved by adding CSS code with opacity: 0 !important; to a specific section.
White Gap Problem:
Replacing the code created an unwanted white space above the banner. The fix involved adding height: 0px !important; to the CSS media query targeting .banner__content.banner__content--middle-center.page-width.
Status: The original issue is resolved. A separate user (Dh7oom) later reported similar banner quality problems but encountered password access issues when seeking help.