Dummies’ Guide to Slider Rev

[iamwithU]

While learning to do a simple slider, I’ve begun to appreciate X Theme’s responsiveness. If I have 2 Cornerstone sections or elements stacked on top of each other in phone portrait screen, they auto adjust & appear side by side in landscape view. For instance, my 2 “cards” in Cornerstone seamlessly rearrange themselves on all devices & spread out & increase in size proportionately. This made me love X Theme more now!

Can someone kindly tell me how to achieve this in Slider Rev - in very broad steps & generic way? Pictures or screencasts will help. For eg, if have 2 thumbnails on top of each other in phone portrait, how do I make them side by side in a phone LANDSCAPE view?

After I’ve turned “custom grid sizes” on, there are 4 viewports on the slide Editor : desktop, laptop, tablet & phone. Which one corresponds to the phone or tablet landscape?

My slider setting is “full screen”. I suppose I should use “slide based” instead of “grid based” for all my layers, including text & button? But this means their position in relation to each other is subjective?

If you intend to point me to any Themepunch video, please pinpoint exact segment. I’ve watched all their responsive videos a dozen times. But can’t translate it to actual experience. Perhaps it’s obvious but I miss a step. Hope you understand the travails of a beginner trying to grope the way out. Appreciate your patience.

[nico]

Hi @iamwithU,

Thanks for writing in! Please be advised that the slider needs to initialize to be able to display the elements in the browser window. As you tilt the phone to a landscape view, it does not reinitialize which is why it does not look okay. To resolve this, please ensure that you have created a fully responsive revolution slider. Please review this video tutorial on how you can create an auto responsive slider:

For more details, you can also check out the documentation here:
https://www.themepunch.com/revslider-doc/slide-layers/#layercanvas
https://www.themepunch.com/revslider-doc/layer-responsive-behavior/

Hope this helps.

Let us know how it goes.

Thanks.

[iamwithU]

Nope, it did not shed any light. None of my questions were answered:rofl:

I’ve watched that video recommended by Nico a dozen times. Pardon my “dumbness”, which part of that video to be exact deals with the specific issue described by me?

To recap:

1. "if have 2 thumbnails on top of each other in phone portrait, how do I make them side by side in a phone LANDSCAPE view?

2. After I’ve turned “custom grid sizes” on, there are 4 viewports on the slide Editor : desktop, laptop, tablet & phone. Which one corresponds to the phone or tablet landscape?

3. My slider setting is “full screen”. Should I use “slide based” instead of “grid based” for all my layers, including text & button? But this means their position in relation to each other is subjective?"

Can anyone else help me see the light at the end of this tunnel, instead of pointing me to Themepunch’s video? Perhaps list the very broad steps & generic way. Pictures or screencasts will help.

[ruenel]

Hello There,

Thanks for updating in!

1.) You can’t do this in slider revolution because every layer element is using X and Y coordinates related to the canvas widths and heights. You will have to create two sets of layers, one set could that your thumbnails is stacked and the other displays side by side. You will have to use the mobile display of the layers to make this happen. Please check this: https://www.themepunch.com/revslider-doc/layer-mobile-visibility/

2.) Depending on the resolution of the phone, it could that the landscape view screen size of the phone is the tablet’s portrait view size. And the tablet’s landscape view is the desktop’s screen size.

3.) It will depend on your design and the outcome of those items in smaller screens. Most of the times, it should be slide based.

Hope this helps.

[iamwithU]

Thanks RueNel. I’m beginning to see a glimmer of light!

Finally it dawned upon me that the “responsiveness” in Slider Rev is nothing like what I had experienced in X Theme! You may wish to avoid pointing us to Themepunch videos only for us to find out later that it can’t be done​:joy:. Also that video recommended by Nico talks about a background image whereas my issue is about 2 layers (thumbnails).
Your point 2. Does that mean we have to change the “tablet” custom grid size to the phone landscape dimension ourselves? If so, then we lose one viewport & how do we design for a tablet portrait dimension? There are only 4 viewports so something got to go?

[ruenel]

Hey There,

The 4 portrait dimensions is usually in portrait mode. Just make sure to consider the phone’s size of the landscape mode is the tablet’s portrait view size and so on.

Hope this helps.

[iamwithU]

So something has got to be sacrificed? If the tablet (portrait) becomes the phone LANDSCAPE, then doesn’t this mean totally ignoring how the layers look on the tablet (portrait)?

Worse, when I did as you instructed & changed the “custom grid size” to phone LANDSCAPE dimensions, half the layers vanished. I can create layers again…

More importantly, does Slider Rev intend that we can only design for either the tablet portrait or phone LANDSCAPE but not both?

[ruenel]

Hello There,

Thanks for updating in! When you design a slide, you will only have design for the phone, tablet, desktop and large screens. The Rev Slider plugin does not have the option for you to design for the portrait and for the landscape view. The phone’s landscape view is as wide as the tablet’s portrait view. And the tablet’s landscape view is almost as wide as the desktop view.

Hope this helps.