A user is experiencing display issues with mobile images on their Shopify store, where a grey background appears behind both image banners and slide images. The images are not adjusting properly to mobile view.
Proposed Solution:
Theme Settings Adjustment: Navigate to the Image Banner section in the theme customizer and change “Image height” setting from “Small/Medium/Large” to “Adapt to image”
CSS Modification: Add custom CSS code to base.css or section-image-banner.css to force images to cover their containers with proper width and height properties
Image Optimization: Ensure images are high-resolution and use recommended aspect ratios (16:9 or 4:3) for mobile compatibility
The issue appears related to how the Dawn theme handles responsive images. The discussion remains open pending confirmation of whether the suggested fixes resolve the problem.
Have been playing with my mobile images all day and just keep landing with issues. Current issue is that the images are not adjusting to mobile view correctly and now shows a grey background behind images. Happening on my home page with both the image banner as well as slides.
Could anyone help with pointing me in the direction of a fix?
Hey @KyloThomo
This issue is likely caused by the way Dawn theme handles responsive images. Try the following fix:
Solution: Adjust Image Banner Settings ( Priority )
Modify CSS for Better Fit:
.banner__media img {
object-fit: cover !important;
width: 100% !important;
height: auto !important;
}
Check Image Format:
Ensure your images are high-resolution and properly optimized for mobile (use 16:9 or 4:3 aspect ratio ).
After applying these fixes, check on both desktop & mobile. I hope this will fix your issue.
