Experiencing challenges while using FitText.js - I have set up the script in my <head> section like this (I've included all details for context, planning to streamline it later):
<script type="text/javascript">
$(document).ready(function() {
var $container = $('#thumbnail-array');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.video-thumbnail',
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
percentPosition: true
});
});
});
jQuery(document).ready(function() {
jQuery('.mobile-close').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.mobile-nav').toggleClass('active');
e.preventDefault();
});
jQuery('.dropdown').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.mobile-nav').toggleClass('active');
e.preventDefault();
});
$(".fittext1").fitText(1.1);
$(".fittext2").fitText(0.75);
});
$(document).ready(function() {
$('.overlay').hover(function(){
$(this).parent().find('video').get(0).play();
}, function() {
var video = $(this).parent().find('video').get(0);
video.pause();
video.currentTime = 0;
});
});
</script>
The key aspect here is probably this part:
$(".fittext1").fitText(1.1);
$(".fittext2").fitText(0.75);
Subsequently, I'm applying it to two elements, <h5> and <h6>, defined in my CSS as shown below:
h5 {
display:inline;
font-size: 2em;
margin-bottom: 0px;
padding-bottom: 0px;
}
h6 {
display:inline;
font-size: 0.75em;
letter-spacing: 0.3em;
padding-top: 0px;
margin-top: 0px;
font-weight: 100;
}
and referenced in my HTML like this:
<h5 class="fittext1">Title</h5>
<hr>
<h6 class="fittext2">Subtitle</h6>
However, despite expecting them to scale with the parent element, something seems amiss and it's difficult to pinpoint the issue! You can see what's happening here.
I've tried various approaches but haven't been able to achieve consistent text scaling or proportionate resizing on hover effects!
Initially, I targeted the .fittext1 and .fittext2 elements using #ID but switched to class due to multiple instances, yet the problem persists.
If you have any insights into what might be causing this behavior, please share!