Solved

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

CW5
Explorer
80 5 9

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.

Accepted Solution (1)

TerenceKEANE
Shopify Partner
268 55 47

This is an accepted solution.

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;
  }
}
Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 8 (8)

TerenceKEANE
Shopify Partner
268 55 47

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!

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
CW5
Explorer
80 5 9

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

TerenceKEANE
Shopify Partner
268 55 47

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?

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
moritz_merlin
Visitor
2 0 0

@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! 

 

TerenceKEANE
Shopify Partner
268 55 47

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. 😉

 

Terence..

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

TerenceKEANE
Shopify Partner
268 55 47

This is an accepted solution.

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;
  }
}
Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
CW5
Explorer
80 5 9

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!

TerenceKEANE
Shopify Partner
268 55 47

just let me know, if u need anything 😉

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites