CODEWITHSUNDEEP
htmlcsscanvasgridparticles.js
radzak
radzak

Reputation: 3128

Canvas exceeds the grid layout

I am trying to create a grid layout that contains 3 content columns and an .overlay div that contains particles.js canvas.

Here is the codepen of what I'm struggling with: https://codepen.io/radzak/pen/MVQVPQ

I'd like the grid to always be 100% of the screen, so I set this

.container {
  height: 100vh;
  width: 100vw;
}

The issue is that after I extend the window size and then decrease it back again the canvas keeps occupying the space it used to (instead of 100vw x 100vh). I've also noticed that the canvas width and height doesn't correspond to the actual size it occupies.

I have no idea what is happening, any help on how to set this layout up would be appreciated.

Upvotes: 1

Views: 376

Answers (1)

mtthwmsn
mtthwmsn

Reputation: 101

Try setting position: absolute on the canvas to remove it from the document flow.

Upvotes: 2

Related Questions