Imagine we have a slider named .outer, which adjusts its height based on the width of the viewport. Inside this slider, there is an example slide called .inner that contains some text. However, when we shrink the window width, the content in slide .inner starts to overflow outside of the .outer container.
My goal was to dynamically adjust the font size of the text inside .inner whenever the window is resized and the height of .inner becomes larger than .outer. This adjustment would be done in intervals of 5%, gradually decreasing from the original size until the text fits correctly within the slider.
Check out this unworking example: https://codepen.io/rKaiser/pen/JOQQWY?editors=1111
$(window).on('load resize',function() {
var inn = $('.inner');
var inner = $('.inner').outerHeight();
var outer = $('.outer').outerHeight();
if (inner > outer) {
var i;
for (i = 100; i > 50;i--){
inn.css('font-size', i+'%' )
i--;
}
}
console.log('outer ' + outer);
console.log('inner ' + inner);
});
I attempted to use a for loop to decrease the font-size percentage on resize, but I'm uncertain if this approach will work as intended.