Calculator CSS mobile input field text positioning

1

Problem:
Text in my input box for mobile version displays half way down the input box.

Background:
I started with visuals css and html. When it was done I moved to functional javascript. Before I started with javascript displayed values are showing up properly in the input box on the mobile version. When I start adding functionality with javascript input display for mobile version moved half way down the input box. You can see the starting point for mobile if you resize the window before you enter any value, or just refresh the screen if values are entered in desktop mode.

Iā€™m still adding functionality in javascript.

Thanks for the help.

2

I forgot the calculator link

3

For mobile resolution the height for class="input" is 40px. But font-size is "7em" so it could not fit the height.

If you change height: "auto" in class input in media query @media only screen and (max-width: 768px) - line134, it should work fine.

1 Like
4

Thank you. It is fixed now. I just needed to add min-height for input in mobile, otherwise, it flattens the height for the default 0 before any digit is clicked.