Grey background behind mobile image banner and slide images

Shopify Discussion
1

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?

Screenshot 2025-03-24 171302.png
Screenshot 2025-03-24 171302.png532×772 105 KB

Screenshot 2025-03-24 171347.png
Screenshot 2025-03-24 171347.png600×777 207 KB

2

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 )

  • Check Theme Settings:
  • Go to Online Store > Themes > Customize
  • Click on your Image Banner section
  • Set “Image height” to “Adapt to image” instead of “Small/Medium/Large.”

Modify CSS for Better Fit:

  • Go to Online Store > Themes > Edit Code
  • Open base.css (or section-image-banner.css)
  • Add this at the bottom:

.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.