Maybe a Css problem?

Question

I wrote this Fill in the blank game. In this I wrapped all content other than heading in the #container div . But when I ran the code and click on input text box and the keyboard appears the word goes up and overlaps the heading...I'm not a pro at these and this is kind of my first project.
https://code.sololearn.com/Wn6XuCpeicOq/?ref=app

Answer 1

Mayank Chandratre
try changing the #wordbox css for
top to 150px instead of 30%

#wordbox{
...
top: 30%. to top:150px;
}

also, using % for position and relying on translate to reposition things is not very reliable.

You might have to read up on containers(flex, grid, etc) and use them properly to get more reliable results.

In your javascript, I would also recommend to use textContent intead of innerHTML if you are just changing the text of your DOM element.
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Answer 2

Thanks...It worked. And Yes I will make sure to read more about it.