var dynamicText = function() { var windowWidth = window.innerWidth; var dynamicTextContainers = document.querySelectorAll('.sqs-dynamic-text'); for (var el of dynamicTextContainers) { var elementWidth = el.offsetWidth; var widthRatio = elementWidth / windowWidth * 100; var existingRatio = el.getAttribute('data-width-percentage'); if (elementWidth == windowWidth || existingRatio == widthRatio) { continue; } el.setAttribute('data-width-percentage', widthRatio); el.style.fontSize = widthRatio + '%'; var dynamicTextEls = document.querySelectorAll('.sqs-dynamic-text'); for (var el of dynamicTextEls) { // el.style.fontSize = widthRatio + '%'; for ( var p of el.children ){ if ( parseInt(getComputedStyle(p).fontSize.replace("px", "")) <= 13 ) { p.style.fontSize = '13px'; } } } } }; dynamicText();
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter