Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

CW5
Explorer
85 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
512 86 79

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;
  }
}
★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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
512 86 79

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!

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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
85 5 9

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

TerenceKEANE
Shopify Partner
512 86 79

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?

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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
512 86 79

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

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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
512 86 79

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;
  }
}
★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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
85 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
512 86 79

just let me know, if u need anything 😉

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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