Responsive p5.js Canvas in Webflow

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

In this video we will take a look at some tricks to ensure that the p5.js canvas is responsive when we use it in Webflow. Since the Webflow designer doesn't run javascript, we have to be deliberate about our CSS in designer and setup javascript to make sure we don't run in to any issues. I'll show you a bunch of ways to troubleshoot a number of common mistakes with Chrome developer tools.

Watch the Tutorial on YouTube Get the Project Cloneable

Responsive p5.js Canvas in Webflow

Inside <head> tag

Inside </body> tag