Why does my React site resize incorrectly?

Question

I have been using React to create my own professional website. With this, I wanted a cool background in which I decided to use https://www.npmjs.com/package/react-particles-js

The only issue I have is that on mobile the particles do not fill the screen but instead seem to be stuck at the top of the screen. The easiest way to see this is to go to https://my-app-bwp36ovux.vercel.app/ and look at the site on your monitor then use the F12 debug console to change it to a mobile device. When doing so take note of the floating particles in the background.

I got this const I use to set values for the particles

const particalOpt = {
  particles:{
    number:{
      value: 150,
      density: {
        enable: true,
        value_area: 800
      }
    },
    line_linked:{
      distance: 100,
      opacity: .2,
      width: 2,
    },
    move:{
      speed: 1,
      bounce: true,
    }
  }
}

I call it by simply using

<div className="background">
            <Particles 
            params = {particalOpt}
            />
          </div>

I can not seem to put my finger on why using the background attribute these particles do not fill mobile devices.

For the full code go to https://github.com/13Smat/MySite

Thank you in advance.

Answer 1

Issue

The background div has 100vw and 100vh, but the canvas has its own width and height with an override to 100% each. The problem is that the div rendering the canvas has no absolute dimensions for the canvas to inherit from or be relative to.

DOM

<div class="background">
  <div id="tsparticles"> // <-- no height/width for canvas to be % of
    <canvas
      class="tsparticles-canvas-el"
      width="558"
      height="281"
      style="width: 100%; height: 100%;" // <-- applied style
    ></canvas>
  </div>
</div>

The canvas element's applied style:

element.style {
    width: 100%;
    height: 100%;
}

Solution

Provide a width and height to the #tsparticles div. Add the following CSS to your App.css file.

#tsparticles {
  width: 100%;
  height: 100%;
}

Answer 2

If you want particles to be set like a full screen background I would recommend the backgroundMode option, you can read more here

You can set that options like this:

{
    backgroundMode: {
        enable: true,
        zIndex: 0
    }
}

If you set the zIndex property to a negative value remember to change the detectsOn property to ”window” if you need mouse interactions

Answer 3

please take a look at @Drew Reese's comment and edit your question.

---

In the meantime I can provide a helpful example

The attributes that will help you most here are background-size, background-position. You can also look at other background properties that might help.

Side note: React does not particularly change how styling works, I would recommend playing around with CSS - it's the best way to learn