Particles Stretched on Mobile

[lightninglu10]

Hey guys, I'm using particle.js to render particles in the background, but on mobile whenever the app loads up, the particles are stretched.

You can even look at browser width 320px and the particles are stretched out.

Anyone know how to fix this?

lunyr.ngrok.io or lightning.lu10/lunyr-web and click "Home"

[joe4mg]

hi @lightninglu10 - did you manage to find a fix for this?

[lightninglu10]

@joe4mg yes I did. It's kind of hacky, but I set a min-height on the canvas and it doesn't stretch. I noticed that my canvas would have a height of 320 on load, but whenever I navigated around, the height would auto jump to like 1200. So I just set a min-height of 1200 and it's fine.

So check for your app what min-height you would need to set.

[colocoquillo]

Just as a comment, I was having same issue and even if im not quite sure, why it works, but it actually does, i added the following css code to the theme and it works like a charm:

.particles-js-canvas-el { height: 100vmax !important; z-index: 0; }

I really have no idea how did i came up with that, as i dont even know what that css code exactly does (never used the vmax before) but it does.

EDIT: I do understand now why it works, as vh, vw, vmax and vmin are related to view port size, wich means screen size basically. You can read more about it in here https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

[rakib23r]

Thanks man... It worked for me

[reah]

a better solution is adding the following line to your index.html: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

[jrchan84]

Another way is to delay the script until the canvas size fixes itself window.addEventListener('load', function() { setTimeout(function(){ particlesJS.load('particles-js', "particles.json"); }, 500); })

[9r1nc3w1ll]

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

This worked for me. Thanks @reah

[enggsuraj]

Yes, even I had to face the same problem, the trick I applied is used a position: fixed to the canvas with a height.

canvas { position: fixed; left: 0; right: 0; top: 0; z-index: -10; visibility: visible; }

So canvas is always fixed, here is the implementation in my portfolio - https://blogtheorem.com

[SheerazD]

enggsuraj

Thanks man i was confuse, it works for me just removing z-index it was already defined. Keep it up 👍