Different banner image for mobile

Solved
JessAnderson_
Tourist
14 0 3

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

0 Likes
neeravmakwana
Shopify Partner
164 29 32

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

0 Likes
JessAnderson_
Tourist
14 0 3

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

0 Likes
neeravmakwana
Shopify Partner
164 29 32

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

0 Likes
JessAnderson_
Tourist
14 0 3

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.

Screen Shot 2021-01-16 at 9.22.08 am.png

0 Likes
neeravmakwana
Shopify Partner
164 29 32

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){

 

 

0 Likes
JessAnderson_
Tourist
14 0 3

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?

Screen Shot 2021-01-16 at 10.20.00 am.png

0 Likes
neeravmakwana
Shopify Partner
164 29 32

This is an 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.

0 Likes