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

Closed
Nikeo opened this Issue Sep 27, 2017 · 5 comments

Comments

Projects
None yet
2 participants
@Nikeo
Contributor

Nikeo commented Sep 27, 2017

duplicate of #1100
Needs to be fixed here : https://github.com/presscustomizr/customizr-front-js-parts/blob/1289ec7e7b64354746b89402b5967dab9c9e4c88/_parts_modern/_main_slider.part.js#L34

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 www.TheCaresAlliance.org

Thank you for your immediate attention and assistance.

thecaresalliance org_mobile-display-error

@eri-trabiccolo

This comment has been minimized.

Contributor

eri-trabiccolo commented Sep 27, 2017

[opinion]
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).
[/opinion]

@Nikeo

This comment has been minimized.

Contributor

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 http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* 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),
          _font_size;

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

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

        _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.
      resizer();

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

    });

  };

})( jQuery );
@Nikeo

This comment has been minimized.

Contributor

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

@Nikeo

This comment has been minimized.

Contributor

Nikeo commented Sep 29, 2017

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

@eri-trabiccolo

This comment has been minimized.

Contributor

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