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('');

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?

Shopify Expert
667 170 216

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('')!important;



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!
Shopify Partner
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