TagCloud.js working on the computer but not on the phone

Question

I am attempting to use TagCloud.js to display the coding languages I am proficient in. It displays perfectly well on my computer, however when I view it on my phone it looks like the picture provided down below. My code is as follows:

HTML:

<div class="cloud">
    <h3>My Skills</h3><br>
    <span class="content"></span>
</div>

CSS:

.cloud {
    width: 100%;
}
.tagcloud {
    font-size: 25px;
    width: 50%;
    margin: auto;
    z-index: 0;
}
.tagcloud--item {
    transition: all 0.4s ease-out;
    cursor: pointer;
    z-index: 1;
}
.tagcloud--item:hover {
    font-size: 35px;
}

Javascript:

const myTags = ['HTML', 'CSS', 'Javascript', 'React', 'Python', 'Flask', 'Java', 'SQL', 'C',];

var tagCloud = TagCloud('.content', myTags, {
    radius: 150,
    maxSpeed: 'fast',
    initSpeed: 'fast',
    direction: 135,
    keep: true
});

I have tried changing widths, altering the boolean value of keep in javascript, and determining where cloud div is actually going and whether or not that has anything to do with the issue with no luck.

TagCloud crumpled up and glitching

Again, this problem is only with mobile as with the computer the cloud is spread out and moving smoothly. Any suggestions are welcome.