fitty

fitty copied to clipboard

My code is extremely simple for my use case.

JS

import fitty from "fitty";
export default class Fitty {
  constructor() {
    this.init();
  }

  init() {
    fitty(".fitty");
  }
}

HTML

<div class="hero__inner">
            <div class="text">
                <h1 class="heading--1 fitty">COMPANY NAME</h1>
            </div>
</div>

Sometimes, it works on load and fits. Although sometimes, I refresh the page and the text is extremely small. But, if I resize the viewport even by a pixel, it will automatically snap and fill the width of the container. Where am I going wrong?

Only thing I can think of is that the scripts maybe loads before the CSS loads or after causing a difference in how it runs.