reduce the font size on tablet and mobile

[ashehzadgec]

Hy there

I tried to reduce the font size by using media queries but could not find a way to do it.

const createBlotterText = () => {
    const text = new Blotter.Text(textEl.innerHTML, {
        family : "'Playfair Display',serif",
        weight: 900,
        size : 150,
        paddingLeft: 100,
        paddingRight: 100,
        paddingTop: 100,
        paddingBottom: 100,
        fill : 'white'                      
    });
     function myFunction(x) {
        if (x.matches) { // If media query matches
          createBlotterText.size = 60;
        } 
      var x = window.matchMedia("(max-width: 768px)");
      myFunction(x) // Call listener function at run time
      x.addListener(myFunction) // Attach listener function on state changes
    };

I tried different version of this media query in java and css but failed to do so. Any help will be highly appreciated.

[alejandroserrat]

I make the font size responsive depending of the windowWidth with this line:
size: (360 * window.innerWidth) / 2560
If the widow measures 2560 width the size will be 360px and else the corresponding size according to the window width.

You can try this option too:
size: window.innerWidth > 768 ? 150 : 60
If the window width is greater than 768 the font size will be 150 else 60