Trying to design a grid layout with 3 columns of content, alongside an .overlay div featuring a particles.js canvas.
Having trouble? See my Codepen here: https://codepen.io/radzak/pen/MVQVPQ
The goal is for the grid to always occupy 100% of the screen, thus I've set the following:
.container {
height: 100vh;
width: 100vw;
}
An issue arises when resizing the window - the canvas fails to adjust proportionally and retains its previous dimensions instead of fitting within 100vw x 100vh. Furthermore, the canvas's actual size doesn't match its declared width and height.
If you have any insights on how to resolve this layout challenge, your help would be greatly appreciated.