Revolution slider change background image on mobile

Question

I have a site which works perfect with rev slider when browsing with a desktop. But when browsing to it from mobile, the slider images don't display correctly or they are cut off. Is there a way to either switch the images within the slider when mobile browsers come to site or what can i do for mobile? I tried switching with css but that didn't work. Not sure what else can be done. Any help would be very much appreciated.

Answer 1

So, in version 6 at least, you can do this by adding a shape layer with a background image and hide/show that layer depending on screen size.

1. Make a new shape layer.
2. Go to "Size & Pos" in the layer options.
3. Set the "Size Presets" to Cover.
4. Set the "Layer Align" to Scene.
5. Go to "Visibility" in the layer options.
6. Hide the layer on all the screen sizes you don't want it to show on.
7. Make sure your shape layer is at the bottom of the layer stack.
8. Go to "Style" in the layer options.
9. Pick a background image.
10. Make sure it's set to cover in the Position section.

And that should do it. Hope that helps someone.

You might have to fuss with the responsive settings. If you don't really understand the nuances of these settings, I found this video (Slider Revolution 6.0 Responsive Settings) super helpful.

Answer 2

Initially, I didn't think you could. But, it turns out that you can! You just have to make two sliders, then cleverly hide one or the other.

If it's just a matter of the picture dimensions, you can give each slider size a custom size. I have done this to accommodate not being able to read text on the slides when viewing on mobile. By stretching the height of the mobile version, I can now read the text on the images and, thus, problem solved.

You can also just disable the slider when viewing on mobile, like this.