How to make a JavaScript animation responsive?

Question

I am trying to make this java script animation responsive: https://codepen.io/lateek35/pen/QbZdEB . This is my website http://gerydi.com/sincera/ .

and I used this, but it only fits the box size, not the whole text. Do you have any ideas how can I fix it? Font size doesn't affect my text.

@media only screen and (max-width: 480px) {
    #canvas{
        width: 360px!important;
        font-size: 7px!important;
        margin-top:50px;
    }
}   

Answer 1

In the codepen example you provided, you can change the text size in the writeText function:

var textSample = new PIXI.Text(text, { font: '50px Calibri, sans-serif', fill: 'black', align: 'left' });

CodePen Example . Do you have access to that function? If not, you'll have to figure out a way to pass in the font settings.