How to set up different images for mobile and desktop in customised theme

Store Design
,
1

We have a 2.0 Dawn theme that is using a paid, customised theme. For About Us page, we are using a customised Parallax theme that serves like a banner image section with text overlay. How can we have different images for mobile and desktop.

Thanks in advance.

2

Hello,

Manually, it can be done with JS + CSS, but if the theme already has such a feature, it’s better to use that. If you can’t do it, tag me, and I’ll look into the issue!

3

@TerenceKEANE My theme customisation doesn’t have the feature, so I guess it has to be done manually.

4

Then could you please send me the full URL link of the page and the image you want to display on mobile devices? As far as I understand, you want to add a specific image for mobile devices?

5

Hello,

The URL within the following code will replace the image in the specified area only on mobile devices. I’ve tested it in the browser, and it works. If you still can’t do it, just let me know, and I’ll assist you. If you have any other issues you can’t solve, feel free to tag me, and I’ll help whenever I have time between my own programming tasks.

@media only screen and (max-width: 971px) {
  .Aboutus-information.sec3 {
    background-image: url('https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg')!important;
  }
}
6

Thanks Terence for all your help and for working with me with great deal of patience in resolving this matter. It is working fine now.

Cheers!

7

just let me know, if u need anything :wink:

8

@TerenceKEANE we use a DAWN 11.0 theme and I would like to have a different banner image on the main page for mobile. Can you help me out?

Thanks in advance!

9

Hello,

Yes, we can do that. If you can send me the full website link, a screenshot of the desired location on mobile, and the image you want as a link, I can help you. :wink:

Terence..