Increase Size of Text on Mobile

This article is now outdated!

Please click here to view how this can be done with version 5.0+

Sometimes when you’re using the “Auto Responsive” layout, when the slider scales down to mobile-view, the text becomes smaller than you’d like it to be.

This article will cover some possible options you could implement.

 

 

One option is to hide the text on mobile. To do that, first visit your slider’s main settings page, and then enter a number into the “Hide Defined Layers Under Width” field:

hide_under

 

and then inside your slide, select the layer on the preview stage, open up the “Layer Links & Advanced Params” section, and then click the “Hide Under Width” checkbox:

hide_under_2

 

 

Another option is to use some custom JavaScript to manually increase the size of the text on mobile, using CSS3 transforms.

 

Here’s an example of what text might look like “full size” in a slider:

z_before

 

And here’s what this text might look like on a mobile screen:

zoom_before_2

 

And here’s an example of the same text, on the same mobile screen, but this time with the custom JavaScript below applied:

zoom_after

 

To use this custom script, first head over to your layer’s text, and wrap it in a “span” tag with a class name of “zoom-this”.

zoom_one

 

The reason we need to add a “span” tag around our text is to make sure that when we apply the CSS3 transform to the text, it doesn’t interfere with the transform that the slider normally applies to the layer. Using a class name in both the “span” tag and the script below (“zoomSelector” variable in script) will allow you to “zoom” more than one text layer. Just select another layer and wrap it in the same “span” tag like the example in the screenshot above.

 

After you’ve setup your custom “span” tags, add the following script to your slider. Slider Revolution 4.5 introduced a new “Custom JavaScript” section inside the slider’s main settings page, where the above script can be added:

waypoints_1

 

If you aren’t using version 4.5 or higher, click here for instructions about how to update the plugin.

 

To get your slider’s “revapi” name, click the “API” section in your slider’s main settings page, and it will be listed in the API methods as shown in the following screenshot:

api-name

 

And lastly, check out the comments in the code for individual usage.