Show slider based on portrait or landscape orientation?

[SpookyCat]

Is there any way to show a different slider or page based on whether a device is in portrait or landscape mode?

I have a slider which works fine in landscape but when I switch to portrait it either fits to the width or shows large areas above and below my content. To fix this I would like to design 2 sliders one for portrait and one for landscape and switch between them when you rotate your device. Is this possible?

I am referring here to a hero scene as it is for a single page site with just this one slider.

[Prasant]

Hello @SpookyCat,

Thanks for asking.

Revolution Slider has the feature to display or hide slider based on device orientation. Please take a look at following article:

https://www.themepunch.com/revslider-doc/layer-mobile-visibility/

You can utilize CSS media queries to display slider based on Landscape or Portrait mode. Please take a look at following resource and scroll down to the section that starts with Combining multiple types or features:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Thanks.

[SpookyCat]

Thanks, that is very useful, I will give it a go.

[Prasant]

You are most welcome.

[SpookyCat]

I am embarrassed to say I am struggling to get this to work. Firstly where and how do you add this CSS, tried going into customise, additional CSS and putting it there but it returns errors.

[basanta]

Hi There,

You can add the CSS to X-> Theme Option ->CSS.
The CSS panel opens when you click on the left CSS icon.

Hope this works for you!

[SpookyCat]

I have tried adding it here but I guess my CSS skills arn’t up to it.

I have 2 revolution sliders [rev_slider mobilecarl] for landscape and [rev_slider mobilecarp] for portrait. Would it be possible for a bit of example code that would show these sliders based on the @media orientation code? This needs to happen on one page of the website called ‘slidertest’.

If you could help it would be much appreciated, I have been trying but coding is new to me.

[ruenel]

Hello There,

You can add the revolution sliders like this:

<div id="landscape">[rev_slider mobilecarl]</div>
<div id="portrait">[rev_slider mobilecarp]</div>

And then in your css might have something like this:

@media screen and (orientation: landscape) {
    #landscape {
        display: block;
    }

    #portrait {
        display: none;
    }
}

@media screen and (orientation: portrait) {
    #portrait {
        display: block;
    }

    #landscape {
        display: none;
    }
}

This code is just an example and may not work out of the box.

Please let us know how it goes.

[SpookyCat]

You sir are a genius! It worked perfectly. Massive thanks.

[Prasant]

You are most welcome.