Change image in slider for different devices

hi Webflow peeps,

I have a slider on a project that has an image and some text that looks like this:

DESKTOP:

PHONE:

Due to the pixel size of the images used, it looks a bit weird under phone resolutions, it’s to big. Is there a way to substitute the image for another so that only ONE of the bags displays when you get to phone res? I can’t seem to find a way to do it that doesnt effect the larger resolutions as well.

Cheers!
Karl

  1. in desktop mode, add the mobile image
  2. give that mobile image a class and give it a display:none;
  3. go to mobile mode, click on the slider image, give it a class and give it a display:none;
  4. go to your layers, click on the mobile image, give it a display:block;

this way you have two images in there. one shows in desktop, the other will show only in mobile.

hope this helps =)

GL HF

2 Likes

You sir are a Legend!!

I’ve been racking my brain trying to figure that out. Apparently not hard enough though!

thanks :smile:

1 Like

@Karl_M You can also just click on the element and choose where you want it to show up in the settings panel without messing with the display settings. Either way works. It’s up to you!