Different banner image for mobile

[JessAnderson_]

Hi all, 

I am struggling to find the solution here, even after trying to find the solution myself. 
How can I make the banner swap to a different image when on mobile?

The website url is: leahcarrollfitness.com.au
Password: teishi

I'd really appreciate any help, thankyou

[neeravmakwana]

Hi, can you please check if this helps you do what you're trying to:

https://community.shopify.com/c/Shopify-Design/Changing-the-hero-sliding-image-for-mobile-only-Brook...

[JessAnderson_]

I see that this applies to a slideshow. 
Mine is an image with text overlay, will it still work?

[neeravmakwana]

I think you will need to modify the code suitably and change references from slideshow/hero to the section you wish to apply to.

[JessAnderson_]

I'll have a look at it, I have added some code to allow me to choose an Image and Banner option in my customiser. 
I'm not sure if this can help, I can add images, it just doesn't functionally apply when I change screen sizes.

[neeravmakwana]

OK, in that case can you try wrapping your code in something like the below (max-width for mobile view and min-width for desktop view):

@media screen and (max-width: 768px){

[JessAnderson_]

I've tried adding this to my css. 
I'm not sure how to target the class for Banner Image and Image within my customiser sections. 

What are your thoughts?

[neeravmakwana · Accepted solution]

Hi, if you can share screenshots of the sections you are trying to find the section classes for, I can try to help.

Additionally, if you open your website in Google Chrome on your desktop, go to developer console (hitting F12 key) and simulating mobile view, you'll be able to see section classes.