Custom code to display slider as a different image one mobile not working

New Member
1 0 0

I have two images, one that I want to use for desktop and one that I want to use for mobile. I'm trying to edit the css code with the following:

 

 @media screen and (max-width: 767px) and (min-width: 100px){
    background: url('https://cdn.shopify.com/s/files/1/0251/3102/4444/files/mobileg_8856e568-a6ee-4c0e-a6ce-f780d34c1864.jpg?141');
}

I tried setting it in .slide-image-container and also in .slide-image and nothing. It doesnt break any code, but it seems to get overrode with the desktop image. 

 

Any clue?

0 Likes
Highlighted
Trailblazer
463 115 160

Hi, @gscleaning ,

This is Evita from On The Map.

 

Try adding !important to CSS code, if this doesn't work, then add your store URL and I will check what's the problem, maybe the class names are just wrong.

 

@media screen and (max-width: 767px) and (min-width: 100px){
    background: url('https://cdn.shopify.com/s/files/1/0251/3102/4444/files/mobileg_8856e568-a6ee-4c0e-a6ce-f780d34c1864.jpg?141')!important;
}

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
10 0 1

Hello @gscleaning 

 

Why do you use coding if you can use another slider where you can do it with drag-and-drop without any coding?

You can try LayerSlider - they have an option where you set for each device using a different and optimized image, Desktop, Tablet and Mobile - so you can keep the page speed if you use an optimized image then the old one

0 Likes