0

I'm using this CSS fix to create a true 100 VP design for the mobile version of a landing page: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Everything is fine until the moment I click the input field of the subscribe form, then a white area is added in the bottom of the screen and after submitting the form the homepage freezes in this state, hiding parts of the nav. Breaking the design.

I'm not sure what's causing this behavior. Also it's very difficult for me to troubleshoot because the problem doesn't appear in Google Dev tools when clicking input field of the form but only on physical units or when using Lambdatest.com or similar emulators.

Grateful for any suggestions? I guess something in the css code is breaking..

Please see screenshots or a video below showing the whole "process" from working to breaking.

Video:

https://drive.google.com/file/d/1jGuHm7lJnGZKJozfcX6z4V5UMDlSnQBz/view

Photo series.

Before clicking:

enter image description here

After clicking:

enter image description here

After submitting:

enter image description here

octavemirbeau
  • 481
  • 6
  • 19
  • Does this answer your question? [Android Keyboard shrinking the viewport and elements using unit vh in CSS](https://stackoverflow.com/questions/32963400/android-keyboard-shrinking-the-viewport-and-elements-using-unit-vh-in-css) – Tala Apr 15 '21 at 22:44
  • I've tried all suggestions there unfortunately but none of them are working for me. – octavemirbeau Apr 15 '21 at 23:28
  • I can live with the effect that's caused by the keyboard opening, but when the keyboard closes I would like it at least to come back to normal. I'm not sure why it's freezes, this I believe is another unrelated problem... – octavemirbeau Apr 15 '21 at 23:52
  • 1
    I solved it no fancy whatsoever needed, I simply set the position of the body tag to fixed now it works both to open the keyboard + close it. – octavemirbeau Apr 15 '21 at 23:56

0 Answers0