Image size on mobile vs desktop - dawn theme ver 15

Shopify Discussion

Topic summary

A user seeks help making images fit properly on both desktop and mobile devices in the Dawn theme version 15.

Proposed Solution:

  • Create two separate image banner sections: one for desktop, one for mobile
  • Use CSS media queries to hide each section on the opposite device type
  • Desktop banner: hide on screens below 768px width
  • Mobile banner: hide on screens above 767px width

Alternative Approach:

  • Use focal points instead of duplicate sections when possible
  • Design banners that naturally crop well across both desktop and mobile
  • Reserve the dual-section method only for cases requiring completely different images

The discussion remains open with no final decision from the original poster on which approach to implement.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
2

Hi @nhabd12

It can be but will not display in excellent size, so I recommend you create 2 image banner sections, one for desktop and one for mobile.

In mobile section, add this code to Custom CSS to hide it on the desktop

@media (min-width: 768px) {
.banner { display: none; }
}

And add this code in Custom CSS of desktop image banner section to hide it on mobile

@media (max-width: 767px) {
.banner { display: none; }
}

I hope this helps.

Best regards,

Dan from Ryviu

1 Like