Separate banner images on mobile and desktop - Dawn Theme

Store Design

Topic summary

A user seeks to display different banner images on mobile versus desktop in Shopify’s Dawn 2.0 theme—specifically showing a vertical image on mobile and a landscape image on desktop.

Proposed Solution:
A CSS code snippet is provided to add to section-image-banner.css that hides the first image on mobile and displays the second, while reversing this on desktop using media queries.

Ongoing Issues:

  • Image cropping: When switching to mobile, the banner retains desktop dimensions, cutting off the image. A padding adjustment (padding-bottom: 150%) is suggested as a fix.
  • Image blurriness: One user reports the first image becomes blurry after uploading a second image. A liquid template edit changing w50 to w100 is recommended.
  • Text cutoff: Another user experiences text and button elements being cropped on mobile despite applying the CSS solution.

Status:
The discussion remains open with multiple users encountering variations of the same problem. Contributors request store URLs and screenshots to provide tailored solutions, but no universal fix has been confirmed for all edge cases.

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

Hi,

I am currently using the Dawn 2.0 theme which allows you to have two images on the homepage banner.

What I am trying to do is have one image to show on mobile and the other to show on desktop.

I want the image on the right side (the vertical one) to be shown on mobile and the image on the left (the landscape one) to be shown on desktop. Both images look similar as I have made one for mobile and one for desktop.

Any help would be much appreciated.

The link to my store is fayafij.myshopify.com

Password is: freelo

Thanks,

Aaron

@KetanKumar

2 Likes
2

@Aaron-Mihell

yes please try this

https://www.mojoin.com/show-shopify-banner-image/

3

Hi @Aaron-Mihell ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > section-image-banner.css and paste this at the bottom of the file:
.banner__media:first-child {
    width: 100%;
}
.banner__media+.banner__media {
    display: none;
}
@media screen and (max-width: 749px) {
	.banner__media:first-child {
		display: none;
	}
	.banner__media+.banner__media {
		width: 100%;
		display: block !important;
	}
}

Hope it helps!

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

24 Likes
4

Hi @LitCommerce

Thank you for the help, I really appreciate it.

The code works great apart from when it switches to the mobile banner, the image is cut off and the dimensions of the desktop image still apply.

Is there a way so when it switches to the mobile image, the banner is the same dimensions as the image?

Hopefully this makes sense. I’ve attached an image to show you what I mean.

Thanks,

Aaron

Screenshot 2021-10-26 at 12.03.12 am.png
Screenshot 2021-10-26 at 12.03.12 am.png705Ă—1079 58.9 KB

5

Hi @Aaron-Mihell ,

Please add code:

@media screen and (max-width: 749px) {
	.banner__content::before{
		padding-bottom: 150% !important;
	}
}

it will work fine.

6 Likes
6

Hi @LitCommerce

That’s great, all works! Thank you for your help.

7

Hey man, I tried your code. It works, however when i upload image #2, image #1 becomes blurry all of a sudden. Any idea how that’s possible? @LitCommerce

8

Hi @Tinylighter ,

Please send your site and if your site is password protected, please send me the password.

And you can create a new Question and send me the link. I will check it.

9

@LitCommerce

Thetinylighter.com

shiesk

10

I also followed this one since it seemed an easy fix for the problem but to no succes. I

Show Different Shopify Banner Image on Desktop and Mobile

added the css to the base.css

11

Hi @Tinylighter ,

You can create a new Question and send me the link. I will check it.

Because when you post a new question, it will help more people find it faster when you have the same question.

Thank you.

12

You need in image-banner.liquid over line 45 for this:

{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}

to change the 50vw to 100vw.

2 Likes
13

Hi,

I tried the solution you posted, but my image is still cut off.
The text " world full of sunshine" is supposed to be on the image along with the button.

Screenshot 2021-12-07 at 5.05.08 PM.png
Screenshot 2021-12-07 at 5.05.08 PM.png756Ă—1296 172 KB

1 Like
14

@Alinear7

you have try this?

https://www.mojoin.com/show-shopify-banner-image/

15

Hi @KetanKumar

I have tried this in the DEBUT theme and it worked perfectly fine.

However, this does not apply to the DAWN theme. Is there a solution for DAWN theme?

16

Hello, the banner on desktop seems to have awful quality after implementing this code. Is there a fix to this?

17

Great work! Well done!
Now i’m trying to find the solution for not displaying the banner at all:
If I add image on the left only, then banner would show up for the desktop mode only.
If I add image on the right only , then the banner would show up for the mobile mode only.

If I add both images, then it would show up on both screens…
To get this solved would be fantastic…

18

Hi @Edwinnn ,

You can create a new Question and send me the link. I will check it.

Because when you post a new question, it will help more people find it faster when you have the same question.

Thank you.

19

@LitCommerce @Edwinnn Hello! I have the same issue but any solution to the blurry banner image yet?

20

Hi @Logius ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

1 Like