Text rapidly get smaller when resizing viewport

[mxmilkiib]

I'm having the above trouble in Chrome 22 and Firefox 15 on Linux. Several seconds of resizing the window/viewport mades the text disappear. Even opening the inspector in Chrome triggers the site title to shrink. Refreshing after resizing loads the title as expected. Any advice? Thank you.

[davatron5000]

Link to an example?

[mxmilkiib]

Sorry for the late reply. I'm getting this on http://goodsamaritansuite.org/

[davatron5000]

$(document).ready(function() {
  $('#pagetitle').fitText(3.6);
  $('#desctitle').fitText(2, { minFontSize: '14px' });
});

So fitText appears to be working but it's super aggressive at the moment. You have your #pagetitle targeted with fitText() but your compressor value is at 3.6. That means it's ultra-compressing it.

By defuaut fitText() sets the font size at 1/10th the width of the parent container (a container at 960px would have a 96px font size). By setting the compressor to 3.6, it's now 1/36th. So that's why it's disappearing into nothing.

To achieve the affect you're looking for, you'll probably want to do 3 things:

• Make you #pagetitle container display: block; width: 100%
• Lower that compressor value
• Set a minFontSize and maxFontSize value.

Good luck.

[mxmilkiib]

Thanks, the display: table-cell, vertical-align: middle; centring method was causing the text size not to increase when the viewport is made larger again. I need to find a better solution for that.