How to set up separate mobile and desktop images on Dawn theme?

[KMichael]

Hi there,

Could you help me set up separate images for mobile and desktop?

I am using Dawn theme.

Thank you

[LitCommerce · Accepted solution]

Hi @KMichael,

Go to Assets > base.css and paste this at the bottom of the file:

.banner .banner__media:first-child {
    width: 100%;
}
.banner .banner__media+.banner__media {
    display: none;
}
@media screen and (max-width: 749px) {
	.banner .banner__media:first-child {
		display: none;
	}
	.banner .banner__media+.banner__media {
		width: 100%;
		display: block !important;
	}
}

it will help you to display 2nd image for mobile.

[nurture_nestle]

Is there any way to get the container and then text below the image rather than above? I did your CSS fix, but now the image is below the text which doesn't look very good.