Different slider layout on devices

[xoa]

Hi there, I’ve already spent so much time to get this right, but I could not find a solution. Now I’m frustrated and in need of your help.

What I want to achieve:

I want to add a slider below the header, the slider is a fullscreen or hero slider that fits to the whole viewport. This is no problem.
My problem is, that on mobile devices, I don’t want the fullscreen setting. There I want to output the image normally, without the fullscreen setting. I’ve tried RevSlider and Layer Slider, spent a lot of hours, but haven’t been able to do this.

Maybe you can help me there. Thanks a lot.

[ruenel]

Hello @xoa,

Thanks for writing in!

You can actually create two sliders. One slider that is “Fullwidth” and the other will be just “Auto”. Instead of adding the slider in the Slider Settings Below Masthead, you will have to edit your page and create a dedicated Section with two rows which will hold the sliders. You can show/hide each of the row in a specific screen resolution by utilizing the “Hide During Breakpoints” option in the row settings. For more details about this feature, please check out this documentation:

• https://theme.co/docs/hide-or-show-content-by-device-size

Hope this makes sense.

[xoa]

Thanks for writing me. Yes that would make sense.
There are just two things:

1. How to add the slider in the Content Editor right before the headline of the Icon Theme Stack on my site? Or should I disable page titles and add my own on Content Editor? That would give me more flexibility.

2. How to include the scroll to bottom anchor for the fullwidth slider?

Thanks a lot

[christian]

Hey @xoa,

1. To add Slider Revolution to the builder, you can use the Classic Slider Revolution element or insert the Slider Revolution shortcode in a Text element.

2. Slider Revolution has its own Scroll Bottom anchor. To use it, follow the instruction at https://www.themepunch.com/faq/scroll-below-the-fold-button/

I just like to add that Slider Revolution has responsive settings too so if you learn how to set it up, you’ll just need 1 slider. Visit the links below to learn more.

• https://www.themepunch.com/slider-revolution/responsive-setup/
• https://www.themepunch.com/slider-revolution/responsive-settings/

Hope that helps.

[xoa]

Thanks for your reply.
You mentioned that it could be done with just 1 slider. But the problem is, I can’t get rid of the fullscreen view on a mobile device when I do all with just one slider. Or are there specific settings for this? I tried a lot, but nothing worked.

I attached two images. As you can see it looks nice on a large viewport (desktop), but bad on a mobile device. There I’d like to resize the image by width and height.

[rad]

Hi @xoa,

You can only change the layer layout per device, but you can’t disable the full-screen or similar setting. You’ll have to use two sliders for that setup. Then use visibility options of the row or element where you added the slider. https://theme.co/docs/hide-or-show-content-by-device-size

Thanks!