BASICS on Slider Rev: How to use the "auto" sizing feature for layers

[iamwithU]

Hello,
I am learning to understand the basic features of the Slide Editor in Slider Rev.
After adding a new layer, in the “Style” tab, under the “X” and “Y” coordinates, there is a button for “W” and one for “H”. One of the options is “Auto”. What is the purpose and when do I use “Auto”?

When I hover my mouse over it, the tool tip says “Use auto to respect white spaces”. What are “white spaces”?

I went to their Documentation but it has only a terse sentence, which sounds Greek to me:
"13-14. Layer Width / Height
Entering pixel values will give the layer a predefined size. Or for text layers, enter “auto” for automatic sizing.

[friech]

Hi There,

W and H are referring to the width and height of the layer respectively, usually, you keep the height auto so it will always proportion to the width and keep its aspect ratio.

When you set either height and/or width to auto that means that layer has no fixed width/height and it will respond to the size of your text/content. A demonstration of this is when you add a text layer set the height to auto and hit the enter key as many times as you want, you’ll see the layer height respond, that is respect white spaces.

Please always consult the Slider Revolution Documentation, it might be hard for you to understand it for now, but it will be much clearer as you learn how to use the Rev Slider.

I advise that you constantly preview your Slider on the actual page because most of the time the Rev Slider preview is not accurate (screen width discrepancy), this is where the confusion coming from.

Thanks,

[iamwithU]

Friech, what you said was enlightening.

Could you help me gain a deeper understanding:
If I were to set the text layer to “auto” for width & height, how will the text adjust in size for various devices - e.g. will it enlarge proportionately if the phone is titled from portrait to LANDSCAPE view?

In other words, if I want some text to auto increase in size when the screen width increases, what must I do?

Right now, there are only 4 viewports that I can make adjustments in - desktop, laptop, tablet, phone. There is no viewport for the tablet & phone LANDSCAPE. So how do we design the eventual look on the tablet & phone landscape mode?

[friech]

Hi There,

Don’t confuse the width and height with the font-size. Text size is always define with the font-size, unless you use an em unit to its value so it will respond to its container width. Unfortunately, the font-size option on text layer only accept a static px unit, so it will not be responsive. You need to view your layer in each of your viewport preview and adjust the font-size manually.

@iamwithU

So how do we design the eventual look on the tablet & phone landscape mode?

Go back to Slider Settings > Slide Layout and check which size/range your tablet & phone landscape mode will belong.

Thanks,

[iamwithU]

Thanks Friech. I’m getting a firmer understanding now. So it seems we should select “auto” for only either the width or height, but not both.

Just a feedback: after I’ve selected “auto”, when I move the text box & adjust its box by dragging the corners (cursor changes to arrow), the “auto” box automatically changes to a numerical figure & is no longer “auto”.

i find the Slider Rev quite bewildering - the definition of “responsive” is different from X Theme’s experience.

I did as your last para advises. I change the “custom grid size” for the default tablet to phone LANDSCAPE. This means abandoning the tablet PORTRAIT design, right? Hmm…why doesn’t Slider Rev provide more viewports so we can design for both the tablet PORTRAIT & phone LANDSCAPE” screens?

[christian]

Hey @iamwithU,

You can select or set both width and height. Your setting will depend on your slide’s design. Though in most cases, you’ll be working more on the width size because that will restrict or contain the “flow” of the text horizontally.

Regarding, your feedback about dragging the corners, yes that is the normal behavior in Slider Revolution. By dragging, you are basically setting a fixed width. Though you’re setting this in Slider Revolution or working with its interface, essentially, you are working with CSS behind the scenes so in addition to the Slider Revolution’s documentation, it would be best that you also learn or at least understand how CSS dimensions work.

To your statement:

@iamwithU

i find the Slider Rev quite bewildering - the definition of “responsive” is different from X Theme’s experience.

I believe you’re referring to X’s Responsive Text feature? That feature shrinks the text fluidly and not by steps like what is offered in Slider Revolution and the Stepped Root Font Size Mode in Theme Options > Typography. But, since you’re working on the slider, just focus on what the slider offers which is working within the given or predefined viewports. I’m sorry but we could not answer why Slider Revolution only includes 4 viewports.

I don’t know the specifics of your design so I could not answer why your would need to “abandon” the table portrait view. I’d recommend that you watch the Slider Revolution Responsive Tutorial series as it is more focused on the responsive settings of Slider Revolution.

I’d also like to correct @friech’s statement:

@friech

unless you use an em unit to its value so it will respond to its container width

em does not respond to the container width. Please see this article for a good explanation about how the em unit works. Since this unit is not offered in Slider Revolution though, I’d suggest you focus on the traditional responsive text setup which is working on px and the viewports.

Thanks.

[iamwithU]

Thank you Christian, for your super-prompt response, which makes ThemeCo’s support outstanding
I appreciate also your kind tips.

[basanta]

You are most welcome!