Dawn theme - View two images on desktop, one on mobile!

Store Design
, ,

Topic summary

Goal: In Dawn theme’s Image banner, show two images side-by-side with text on desktop, but only the first image (with text) on mobile.

Key context: The Image banner supports two images. The site wasn’t live, so details referenced the theme editor path.

Solutions proposed:

  • Hide the second image on mobile via CSS.
  • Alternative: a YouTube tutorial to use different images for mobile vs desktop.

Implemented fix (accepted):

  • Add Custom CSS with a media query (CSS that applies at certain screen widths) for max-width: 749px to hide the second image container: .banner__media-half:nth-child(2) { display: none; }.
  • Also enable the ‘Stack images on mobile’ option in the Image banner settings.

Outcome: Confirmed to work; issue resolved. No remaining questions.

Summarized with AI on January 4. AI used: gpt-5.
1

Hi - Hoping someone can help. Am using the Dawn theme. If someone is on a desktop, im keen for them to see two images on the image banner i.e first image and second image side by side with text over the top (as per normal) . If however someone is on a mobile, I just want my first image to show and my second image to dissappear (with the default text over the first image). Any suggestions would be greatly appreciated! Best James

2 Likes
2

Hi James,

You may hide second image using CSS but for that I need your site url and the exact location of the part with text and image. I can send you css which might help you with your requirements.

3

Hi @JamesC1990

This maybe help, it will give another image on mobile and another image on desktop.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Hi Shraddha, Thanks for coming back to me. Im still building my site so the URL isnt live yet.

To describe in greater depth however, if you open the dawn theme to customize. On the home page under Template - add a section called image banner.

JamesC1990_0-1701116588506.png
JamesC1990_0-1701116588506.png290×214 7.4 KB

Within image banner you can add two images e.g:

JamesC1990_1-1701116635136.png
JamesC1990_1-1701116635136.png277×699 75.2 KB

My aim is to make both images show when on a desktop. But only the first image show when on a mobile device?

Best,

James

5

Go to your Image banner section and add this Custom CSS,

@media(max-width: 749px){ 
  .banner__media-half:nth-child(2){ 
    display:none; 
  }
}

Note. Set checkbox: Stack images on mobile.

My two cents. Good luck!

1 Like
6

This worked perfectly thank you so much!!!