I’m trying to display different images for mobile and desktop view with the dawn theme but when i preview my store it just puts the 2 images side by side. Any ideas how to fix this?
Topic summary
A user struggled to display different images for desktop and mobile views in the Dawn theme, as both images appeared side by side instead of switching based on device type.
Solution provided:
- Create two separate ‘Image Banner’ sections
- Use CSS media queries to hide one section on mobile and the other on desktop
- Mobile breakpoint:
max-width: 749px(hides desktop image) - Desktop breakpoint:
min-width: 750px(hides mobile image)
The solution includes code snippets showing the exact CSS implementation. The original poster confirmed this approach successfully resolved their issue after weeks of attempts.
An easy way I accomplish this is by using two ‘Image Banner’ sections—one is hidden on desktop, and the other is hidden on mobile.
Hide on mobile
@media screen and (max-width: 749px) {
{
display: none;
}
}
Hide on desktop
@media screen and (min-width: 750px) {
{
display: none;
}
}
1 Like
Omg this has finally worked thank you so much I’ve been trying for weeks!