CSS - How to fix body flexibility problem in a form?

Mohd Kashif 0
Viewed 23

I've created a login form using html and css. Everything was okay but then there is a problem arises when I tried to resize the width and height of the window screen by cursor. Contents inside the form are overlapping each other when I'm resizing the window screen from the bottom by cursor. I've styled the display of the body as flex but I don't know why this is happening.

Before resizing the window screen

After resizing the window screen from bottom

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}

.container {
    max-width: 1100px;
    height: 70%;
    width: 80%;
    background-color: #05C3DD;
    padding: 60px 30px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}

.container .container {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.container .container .title {
    font-size: 25px;
    color: #05C3DD;
    font-weight: 500;
    position: relative;
    margin-left: 15px;
    margin-bottom: 28px;
}

.content form .login-details {
    margin: 20px 0 12px 0;
}

form .login-details .input-box {
    margin-bottom: 30px;
    margin-left: 15px;
    width: calc(100% / 2 - 20px);
}

form .input-box span .details {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}

.login-details .input-box input {
    height: 45px;
    width: 205%;
    outline: none;    
    font-size: 16px;   
    padding-left: 15px;
    border: 1px solid #ccc;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}

.login-details .input-box input:focus,
.login-details .input-box input:valid {
    border-color: #05C3DD;
}

.button {
    text-align: center;
}

form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}

form .button input:hover {
    /* transform: scale(0.99); */
    background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <link rel="stylesheet" href="style2.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="container">
        <div class="container">
        <div class="title">Login To Your Account</div>
        <div class="content">
            <form action="#">
                <div class="login-details">
                    <div class="input-box">
                        <span class="details"></span>
                        <input type="text" placeholder="Username" required>
                    </div>
                    <div class="input-box">
                        <span class="details"></span>
                        <input type="text" placeholder="Password" required>
                    </div>
                </div>
                <div class="button">
                    <input type="submit" value="Login">
                </div>
            </form>
        </div>
    </div>
    </div>
</body>

</html>

word-wrap flexbox forms css html
1 Answers

Your .container and body heights are fixed values which means the content won't have any affect on their layout once you start reducing the height of the window.

Try using min-height instead to allow the content to affect their layout:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    display: flex;
    min-height: 100vh; /** min-height used here instead */
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}

.container {
    max-width: 1100px;
    min-height: 70%; /** min-height used here instead */
    width: 80%;
    background-color: #05C3DD;
    padding: 60px 30px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}

.container .container {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.container .container .title {
    font-size: 25px;
    color: #05C3DD;
    font-weight: 500;
    position: relative;
    margin-left: 15px;
    margin-bottom: 28px;
}

.content form .login-details {
    margin: 20px 0 12px 0;
}

form .login-details .input-box {
    margin-bottom: 30px;
    margin-left: 15px;
    width: calc(100% / 2 - 20px);
}

form .input-box span .details {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}

.login-details .input-box input {
    height: 45px;
    width: 205%;
    outline: none;    
    font-size: 16px;   
    padding-left: 15px;
    border: 1px solid #ccc;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}

.login-details .input-box input:focus,
.login-details .input-box input:valid {
    border-color: #05C3DD;
}

.button {
    text-align: center;
}

form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}

form .button input:hover {
    /* transform: scale(0.99); */
    background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <link rel="stylesheet" href="style2.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="container">
        <div class="container">
        <div class="title">Login To Your Account</div>
        <div class="content">
            <form action="#">
                <div class="login-details">
                    <div class="input-box">
                        <span class="details"></span>
                        <input type="text" placeholder="Username" required>
                    </div>
                    <div class="input-box">
                        <span class="details"></span>
                        <input type="text" placeholder="Password" required>
                    </div>
                </div>
                <div class="button">
                    <input type="submit" value="Login">
                </div>
            </form>
        </div>
    </div>
    </div>
</body>

</html>

Dan Carter0
Related