P5.js breaking mobile (Trouble hiding jquery on Mobile)

[hesuhpark]

Hi, I finally figured out how to implement my P5.js code, but have run into the problem of it now breaking my site when viewed on mobile—nothing will scroll on mobile.

I followed the tutorial here made by @debutdebut but not sure if their trick doesn't work anymore with new updates.

Referring to this section:

if (jQuery(window).width() > 600) {
  jQuery.getScript( "https://yoururl/wordpress/wp-content/assets/sketch.js", function( data, textStatus, jqxhr ) {
    console.log( data ); // Data returned
    console.log( textStatus ); // Success
    console.log( jqxhr.status ); // 200
    console.log( "Load was performed." );
  }); 
}

---

And my code in reference here:

CSS

#defaultCanvas {
  margin: 0;
  padding: 0;
  width: 100%;
}

#defaultCanvas canvas {
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
}

<head>

<script src="https://hesuhpark.com/wp-content/uploads/2021/11/p5.js"></script>
<script src="https://hesuhpark.com/wp-content/uploads/2021/11/sketch-rb.js"></script>

<script>
    if (jQuery(window).width() > 600) {
  jQuery.getScript( "https://hesuhpark.com/wp-content/uploads/2021/11/sketch-rb.js", function( data, textStatus, jqxhr ) {
    console.log( data ); // Data returned
    console.log( textStatus ); // Success
    console.log( jqxhr.status ); // 200
    console.log( "Load was performed." );
  }); 
}
</script>

<script>
function setup() {
	var cnv = createCanvas(1998, 1080); 
	cnv.parent('defaultCanvas'); // this is the id of the div
	cnv.position(0, 0); // this gives the sketch an absolute position in the top left corner
}


window.laytheme.on("newpageshown", function(layoutObj, type, obj){
  if(obj.slug == "portfolio-2021"){
    jQuery('#defaultCanvas').show();
    } else {
     jQuery('#defaultCanvas').hide();
  }
});
</script>

If anyone could help me that would be super appreciative! It's been a difficult journey.