New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider caption elements : default Fittext minsizes too high #1191

Nikeo opened this Issue Sep 27, 2017 · 5 comments


None yet
2 participants

Nikeo commented Sep 27, 2017

duplicate of #1100
Needs to be fixed here :

Bonjour and hello!

I recently purchased your Customizr Pro WordPress theme for our nonprofit and built a site using MODERN version. Unfortunately, the font for the sliders is not adjusting for mobile phones and we cannot manually adjust it. The font is too large and so the complete text doesn't display and the CTA button is not visible/active. Please see attached screenshot.

Additional notes from my designer: So it looks like the slider-text that Customizr Pro uses has font-size and line-height inlined and they have hardcoded it. We need to be able to get the 80 characters in the Title shown on the slider to appear with the Button text (i.e. Read More) on mobile phones.

We are publicly launching our site on October 1st so we need help fixing this as soon as possible, please!

The site is

Thank you for your immediate attention and assistance.

thecaresalliance org_mobile-display-error


This comment has been minimized.


eri-trabiccolo commented Sep 27, 2017

So the mins and maxs there should be bound to the actual slider's height (user seems to have a custom height smaller than the default one - I'm on mobile so I'm not sure about this).
The custom height can be a localized param for now, and a data- attribute in the future (when more than one slider will be possible).


This comment has been minimized.


Nikeo commented Sep 27, 2017

ah ah ah
I like this opinion tag :)

yep, the height should be taken into account when computing the font size.
not sure if we really need to pass the custom height as attributes, the min/max could be made dynamic by allowing minFontSize and maxFontSize to be defined as functions.

like this for example

/*global jQuery */
* This is an adapted version of fit text
* 1) a user defined caption font ratio has been added
* 2) the resizer takes into account not only the element width, but the specified parent's height. => this solves the problem of fonts not properly resized on landscape mobile devices, or slider too short (user can set the slider's height)
* @return void()
* FitText.js 1.2
* Copyright 2011, Dave Rupert
* Released under the WTFPL license
* Date: Thu May 05 14:23:00 2011 -0600

(function( $ ){

  $.fn.czrFitText = function( kompressor, options ) {

    // Setup options
    var compressor = kompressor || 1,
        settings = $.extend({
          'minFontSize'            : Number.NEGATIVE_INFINITY,
          'maxFontSize'            : Number.POSITIVE_INFINITY,
          'fontRatio'              : 1,
          'refParentSel'           : '.fittext-p',
          'parentCompressorFactor' : 8,
        }, options);

    settings.minFontSize = 'function' == typeof( settings.minFontSize ) ? settings.minFontSize : function() { return settings.minFontSize; };//NEW
    settings.maxFontSize = 'function' == typeof( settings.maxFontSize ) ? settings.minFontSize : function() { return settings.maxFontSize; };//NEW
    return this.each(function(){

      // Store the object
      var $this      = $(this),
          $refParent = $this.closest(settings.refParentSel),

      // Resizer() resizes items based on the object width divided by the compressor * 10
      var resizer = function () {

        _font_size = Math.max(
              $this.width() / (compressor*10),
              ( $refParent.length >= 1 ) ? $refParent.height() / (compressor*settings.parentCompressorFactor) : $this.width() / (compressor*10),
              parseFloat(settings.maxFontSize() )//<=called as function

        _font_size = Math.max( _font_size * settings.fontRatio, parseFloat( settings.minFontSize() ) );

        $this.css('font-size', _font_size  );
        $this.css('line-height', ( _font_size  * 1.45 ) + 'px');

      // Call once to set.

      // Call on resize. Opera debounces their resize by default.
      $(window).on('resize.czrFittext orientationchange.czrFittext', resizer);



})( jQuery );

This comment has been minimized.


Nikeo commented Sep 27, 2017

to be tested.

@Nikeo Nikeo self-assigned this Sep 27, 2017

@Nikeo Nikeo closed this in 5765cd2 Sep 29, 2017


This comment has been minimized.


Nikeo commented Sep 29, 2017

@eri-trabiccolo I went for a simple fix for the moment.


This comment has been minimized.


eri-trabiccolo commented Sep 29, 2017

yeah I saw ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment