Scale size of text up/down with % to sit nicely inside parent container. Great for live-type over images/slides. - CURRENTLY DEPENDENT ON A BASE SIZE FROM: {{ settings.adv_page_width }} - how should this be remedied? What's the best way to get a 'default' size? Maybe just a px val in data attribute?

scale_text_with_container.html

<script>
$(function(){
     //Text that scales up/down based on container width
     function resizeScalingTextFromColumn() {
       $('.scaled-text').each(function(){
         var $base = $(this).closest('.scaled-text-base');
         var scale = $base.width() / {{ settings.adv_page_width }};
         $(this).css('font-size', (scale * 100) + '%');
       });
     }
     $(window).resize(resizeScalingTextFromColumn);
     //Note: Use debounced-resize if available
});
</script>




<div class="container">
  <div class="column-size-class scaled-text-base">
    <h1><span class="scaled-text">I HAVE THE POWEEEEER</span></h1>
  </div>
</div>