CSS и Html изменяют размер формы входа, не вдавливая текстовое поле на меньшем экране?

Question

У меня есть форма входа в систему, которая при просмотре на небольших экранах приводит к сжатию текстовых полей до очень узкой высоты. Когда я устанавливаю высоту для родительских контейнеров login-form и login-container, высота родительского контейнера увеличивается, но не текстовые поля, они остаются узкими.
В: Как можно увеличить высоту при просмотре на маленьком экране?
HTML:

    <!-- Login form -->
    <div  class="login-form animate" >
        <form action= "" method="post">
            <div class="login-container ">
                <h2>Welcome!</h2>

                <input type="text" placeholder="Username.." name="uname" id="uname" required>
                <input type="password" placeholder="Password.." name="passw" id="passw" required>
                <input type="hidden" name="token" id="token" value= <?php echo $_SESSION["loggedin"] ?> >

                <button class="logbut" type="submit" name="login" id="login">Login</button>

            </div>
        </form>
        <form action= "index.php" method="post">
            <div class="login-container ">
                <label>
                    <input class="pswreset" type="submit" name="forgot" id="forgot" value="Forgot password?">
                </label>
            </div>
        </form>
    </div>

CSS:

.login-container {
    padding: 16px;
}

.login-form {
    left: 1%;
    right: 1%;
    position: absolute;
    width:25%;
    text-align: center;
    margin-right:auto;
    margin-left:auto;
    display: grid;
    grid-template-columns: auto;
    align-content: center;
    background-color: #FFFFFF;
    border-radius: 4px;
}
/*Small media devices specific styles*/
@media screen and (max-width: 800px) {
/*-------------Login page------------*/
    .login-form, .login-topnav {
        width: 100%;
        max-width:100%;
        margin: 0px;
        padding: 0px;

    }

    .login-container {
        margin: 0px;
        width: 100%;
        max-width:100%;
        padding: 0px;
    }

}

Answer 1

Итак, я решил свой вопрос. Вы просто устанавливаете отдельные текстовые поля на желаемую единицу высоты, в моем случае 6vh Relative to 1% of the height of the viewport* т.е.:

/*Small media devices specific styles*/
@media screen and (max-width: 800px) {
/*-------------Login page------------*/
    input[type=text], input[type=password], input[type=email] {
        width: 99%;
        padding: 0px;
        height: 6vh;
    }