Hi guys!
I’m working on a new layout using React, but I found a bizarre issue which I can’t understand. Everything looks fine in my project on the desktop version, but the height of my HTML goes crazy on mobile and the page extends to a weird blank space.
The bug is only on mobile. I’ll really appreaciate any help.
https://codepen.io/michelmarechal/pen/rXvMLz?editors=0110
Thanks!!
I noticed that only on Chrome mobile the width of 200vw is being applied also to the height. Any advice will be appreciated. On Firefox my project looks just fine 
I think viewport units can sometimes be a bit problematic on mobile (depending on the device and browser). I would not trust Codepen for something you want to fully test and have working on different devices, for that I think you have to host it somewhere else. I would suggest looking into using something like netlify.
I’d also suggest making it a single page and using a router to switch between the views. You can animate the page transition as well (example). I know it’s easier said than done but it might be a good time to start looking into using a router and (if you want) animations.
Thank you, @lasjorg! I thought using hw was a faster solution, but I’ll read more about routing with React 