The Revolution Slider Responsive Font Scaling Issue

Revolution Slider Responsive Scaling

I am not a big fan of sliders as they do affect conversion rates, but some clients want them, and on creative sites they actually work quite well. Out of all the sliders, I would say Revolution Slider is my favorite. And it is probably the most well known plugin. However there is one problem it does have, which the competing LayerSlider plugin also has. And that is the ability to change the font size and buttons when everything is scaled down to mobile. By default with Revolution Slider the font scales down so small that it becomes unreadable. I am by no means a hardcore developer, but I find this rather frustrating.

The reason this isn’t possible out of the box is because they use absolute positioning that changes on the fly once the content is scaled down. And because of how my variations there are in the plugin they almost have to do this. LayerSlider does it the same way.

This is a response to TJ Kelly’s post “Revolution Slider Responsive Font Size.” He did a great job of explaining the problem but I thought I would expand a bit more since the post is a little old. Themepunch, the developers of Revolution Slider, did post a tutorial finally back in 2014 on how to “Increase the Size of Text on Mobile.” I tried this solution and it does fix the font size problem, but if you apply this to other elements such as buttons it creates scaling issues and overflowing problems.

Default Revolution Slider Mobile Scaling

By default with Revolution Slider this is what my button would look like when scaled down on a mobile device.

revolution slider mobile responsive button

Fixing Revolution Slider Scaling

The best way to fix this problem that I have found is simply to use CSS media queries. I will put an example below that you can use if you want.

Here is the code I am using for my button. Note: I am using Avada theme, so some of the styles and classes come from that, so feel free to edit.

<a class="fusion-button button-flat button-square button-xlarge button-default button-29" href="#"><span class="fusion-button-text">Click my button</span></a>

And here is my media query.

@media only screen and (max-width: 800px)  {
.rev_slider_wrapper a.fusion-button span {
font-size: 15px !important;
padding: 10px !important;
font-weight: normal !important;
letter-spacing: 2px !important;
}
}

You can also apply the same logic to the header text. You just have to change the class.

@media only screen and (max-width: 800px)  {
.rev_slider .tp-caption {
font-size: 15px !important;
}
}

Fixed Revolution Slider Mobile Scaling

This is how my slider looks now after my media query. You can check out the slider in action over at 92 Keys.

revolution slider media query button

It is kind of annoying that I need to do this with such a popular slider plugin. I can’t imagine a small business owner figuring this out. There must be a better way! If you are using Avada, they do have the Fusion Slider which works great for responsive buttons and text, but it also an an annoying load animation which can’t be turned off.

What are your thoughts? Have you run into similar problems? If so I would love to hear about them below.

Get More Stuff Like This

Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.

Thank you for subscribing.

Something went wrong.

6 thoughts on “The Revolution Slider Responsive Font Scaling Issue”

  1. Hi,

    we recommend not using an old version of Slider Revolution. In version from 5.0 up you can design your slides for every screen size separately.

    We generally recommend updating all your plugins, themes and WP regularly for feature and security reasons!

    As for the conversion rate topic. Why don’t you use the Slider Revolution for example as a responsive or fullscreen or fullwidth hero block with a clear Call-To-Action? Examples are included in the slider and our preview page. You know only because there is a “Slider” in the name does not mean all the plugin can do is slide images ;)

    Cheers from your Team @ ThemePunch

    • Hello, thanks for taking the time to comment about this.

      Unfortunately Avada developers are behind and so I am left with version 4.6.93 until they push out a theme update.

      That sounds great about version 5.0. This has been a problem for over a year, that is why I wrote this blog post. I will definitely update this post after testing version 5.0.

      Thanks!

  2. Hi Brian, thanks so much for the link love back to my post. Agreed, mine is old. Thanks for taking the time to update us on the 2015+ status. And my thanks also to Themepunch for being so responsive (if you’ll excuse the pun) to Brian here and to me after my original post. Cheers!

    • Np TJ :) It boggled my mind how this simply didn’t exist yet. You would think centering a CTA button on a slider and making it look good on mobile would be easier by now in 2015. I’m glad to see themepunch got around to adding this, even if it did take them a year+ lol. Better late than never. Haha, great pun.

  3. Thanks for the article !

    I was also wondering if we could pull some text off, only or mobile.
    I mean on my revolution slider I have title, a little text and the button. If i can make the button fatten, i won’t have place for the text and I’d like to pull it off.

    Do you think it could be possible ?

Leave a Comment

shares