TJ Kelly

Revolution Slider Responsive Font Size

[blog_stripe]

Before we start…

If you’re fighting with a WordPress plugin, you’re obviously smart and technical…and probably frustrated. If you need help, especially with technical SEO, you might like my Central MA SEO company, Mxt Media.

Check us out! I’d really appreciate your feedback. Thanks. Now onto the good stuff:

[/blog_stripe]

Update

I heard back from ThemePunch support, but I didn’t like the answer I got, “Custom CSS is really the only option here. Or you could choose to hide the text layers below a certain size.” I guess it’s understandable. The slider uses pixel-perfect offsets and positioning to accomplish its visual effects.

Changing font sizes would change element dimensions which would negate the user’s defined layout and style. It’s a shame there’s no mobile fallback, though. It would mean more work for the authors, but some authors (like me!) would rather do more work up front for a better experience for our users.

At small resolutions, the Revolution Slider Responsive font size is shrunk and resized using javascript down to an illegible size. I want to remove that resizing or customize it so my Revolution slides are usable to my visitors on mobile devices.

[blog_stripe]

1. Modify plugin? No.

This is never a good option, as I’ve said before. I’d run the risk of breaking the plugin, which would put me in a worse situation than I’m already in. Plus, any plugin update will overwrite my changes. Just not a good idea.

Hey Automattic, where the hell are Child Plugins, huh? Make this happen.

2. Overwrite with CSS? I’d rather not.

I could overwrite it with custom CSS, but I’d prefer not to, as this creates unnecessary duplication. I’d prefer to define my preferred size the first time. Plus, for the page-speed-conscious, doing any styling twice is a capital offense. I’d really love to avoid this.

In fact, I’m already doing it for the width of Revslider’s content box. But if I can find a way to define custom styles the first time, I’ll do it for both font sizes and content width.

[/blog_stripe]

3. Change a setting or something? Yes, please.

This may mean extending a class in my functions file. I’ve done this before for things like Smart Archives Reloaded and it works fine, as long as the plugin handles it gracefully and the documentation is clear. Personally, I think it’s the responsibility of a plugin author to allow users to change any and all settings, either via the admin interface or via a basic API. But I digress. Needless to say, this is my preferred option.

Slider Revolution is an awesome WordPress plugin (or jQuery plugin if you prefer the standalone version), but it apparently has one fatal flaw. It usually handles responsiveness very well, but the font sizes appear to be adjusted too far and being illegible.

Dear Themepunch and/or Vibethemes, please help me fix this!

I can’t imagine I’m the only person who’s ever had this problem. And I recognize that it could be a problem with my theme, vEstate. Revolution was bundled with the theme, so who knows what modification has happened, but either way, I need some help to fix this.

Anyone got any ideas? Please let me know!

28 thoughts on “Revolution Slider Responsive Font Size

  1. Kiraly Zoltán

    Hi!

    I had a discussion about this matter with the guys from ThemePunch, they recognized the issue but unfortunately, failed to give a proper response regarding the issue. Did you manage to somehow fix the issue? Or know any workarounds?

    Reply
    1. TJ Kelly

      I ended up using CSS to override the JS-inserted inline styles. Here’s the answer I got from ThemePunch.

      Custom CSS is really the only option here. Or you could choose to hide the text layers below a certain size if that’s an acceptable option. To do that, choose “Hide Under Width” in the layer’s “Layer Links & Advanced Params” section, and then enter a value into the “Hide Defined Layers Under Width” option in the “Mobile Visibility” section in the slider’s main settings page.

  2. Kiraly Zoltán

    Thanks Kelly for the quick response. Could you provide me with a link of what you did? Basically I did the same thing, but I had to override the positioning of the elements too, because some of the text elements were outside of the slider container.

    Reply
    1. TJ Kelly

      I can’t share the link just yet. Client isn’t ready to go live/public with it. I will eventually post it in my portfolio and mention this topic, but that’s still a few weeks away. Thanks for responding.

  3. themepunch

    Hi Tj,

    We really appreciate your details feedback on this Topic !

    We would like to update the current official feedback from our site. We are working on the next version of Slider Revolution which will allow you to create different Compositions for Different Mobile styles. Since this is the only clean solution, we will add a new Visual Editor for different Mobile sizes (optional, and custom sizes are available).

    We plan to release the update with this feature somewhere in May 2014.

    Thanks a lot,

    Your ThemePunch Team

    Reply
    1. TJ Kelly

      Thanks for your reply, ThemePunchers! I look forward to the next version. Sounds like you guys are doing great things to tackle this. Cheers!

  4. Ricardo Nunes

    I had the same problem and I find a solution for this. Use media queries to make the text bigger on the resolution you want. the resizing work by percent so when the resize class is applied, it will be applied to the size of text on your media queries!! I really don’t think that the resize work good, i prefer always work with media queries. I hope this work for you guys!!

    Reply
  5. Marcin

    I tried to find a source code that was responsible for “adjusting” size of the fonts and I think I found it. You need to open the file “revslider/inc_php/revslider_output.class.php” and cut off some lines (form 1200 to 1203) which looks like this:

    //add resizeme class
    $resizeme = UniteFunctionsRev::getVal($layer, “resizeme”);
    if($resizeme == “true” || $resizeme == “1”)
    $outputClass .= ‘ tp-resizeme’;

    Then you can set your own .css code and nothing will destroy your work.

    Reply
  6. Ian Lunn

    A great product ruined by the inability to switch this off, in my opinion. Their article “Increase Size of Text on Mobile” suggests hiding the text that is too small or adding even more JavaScript to the already bloated JavaScript that controls the resizing. Even if they don’t work out a solution to improve this, can’t we just have an off switch?

    Reply
  7. Brian Jackson (@brianleejackson)

    I’m glad you wrote this post, it is rather annoying that something as simple as this doesn’t work. Also the revolution post about solution doesn’t work either. It fixes the font problem, but if you add the class on a button it will flow off the screen.

    The only I have figured out how to solve this is simply adding a media query :( I wish they had a better way.

    ~~~~
    @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;
    }
    }
    ~~~~

    Reply
  8. AC

    Witam Marcin,

    Alas, I cannot find the mentioned code within SliderRev plugin folder.
    I have a text slider (revolution) and nobody seems to help me make the text keep its size and gradually fit to slider box.
    I would be thankful for any helpful guidance if you by chance reach this message.

    Reply
  9. artillery86

    there is no solutions to this, surfed the internet long enough in search of it….. m gonna suggest something i haven’t even tried… go to a website that already has everything working ad then convert the slider there into a preset and download it, after that upload to your own website and customize…..just a thought

    Reply
  10. Kelley Harrell

    it’s maddening. The slider is perfect in all applications, EXCEPT the point size is so small it’s illegible on devices. It is NOT responsive. How could they continue to overlook this??

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *