Different Image on Mobile Web than Desktop Web

Store Design
1

Hello,

I wanted to allow for different images on mobile web than desktop web view and also remove the white space under the image.

How can i do this? :slightly_smiling_face:

I’ve already tried the 2019 version by Ninthony but this version doesnt work anymore :disappointed_face:

Im using the Free Dawn theme.

Thanks in advance! David

2

Hi @DavidG_TL

You can do this using the CSS background-image property. You can set different background images for different viewports.
For example;

For desktop

@media and (min-width: 768px){ 
selector {
background-image: url("enter image url");
}
}

For mobile

@media and (max-width: 769px){ 
selector {
background-image: url("enter image url");
}
}

Cheers!

3

Hello,

thank you for this quick answer! :slightly_smiling_face:

sadly I don’t really understand it. Could you ma be describe it a bit mir detailed?

cheers!