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.

You can start by reviewing [How to ask](https://stackoverflow.com/help/how-to-ask), and then provide us with a [Minimal, Complete, and Reproducible](https://stackoverflow.com/help/minimal-reproducible-example) code example, any debugging details you've tried, any error messages, and what the actual results are and what the expected output should be. — Drew Reese, Dec 17 '20 at 23:08
I may have made it a little better until I finish reading those links. Thank you for the feedback I will continue to edit as I read along. — Andy Silver, Dec 17 '20 at 23:34

score 0 · Answer 1 · answered Dec 17 '20 at 23:29

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

score 0 · Accepted Answer · answered Dec 18 '20 at 04:29

0

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%;
}

answered Dec 18 '20 at 04:29

Drew Reese

165,259
14
153
181

I see your example and that looks great, I added a div around my particles and added the ```#tsparticles { width: 100%; height: 100%; }``` but it still looks like this https://gyazo.com/d4d4858108e560e4abb20f2c9c96195a could this be an issue with how my view is being shown, as you can see the second section is showing on the bottom of the screen which makes me think it's more an issue with how each section is sized? – Andy Silver Dec 18 '20 at 04:55
@AndySilver I tested it first directly in your linked website, https://my-app-bwp36ovux.vercel.app/, both with different sized windows and with the device toolbar enabled.I'm not able to test it on a native device. You don't need to add a div around your particles, the `Particles` component supplies the div with the `tsparticles` id, you only need to add the CSS rules for *that* id. Apologies if that part was unclear in my answer. – Drew Reese Dec 18 '20 at 05:20
@AndySilver Alternatively you can remove *your* background wrapper div and just apply the `className="background"` directly to the `Particles` component: ``. This also appears to work equally well in my codesandbox. – Drew Reese Dec 18 '20 at 05:23

score 0 · Answer 3 · answered Dec 18 '20 at 06:21

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

Why does my React site resize incorrectly?

3 Answers3

Issue

Solution