Try the below changes:
* {
padding: 0;
margin: 0;
font-family: serif;
}
.container {
display: flex;
justify-content: center;
align-items: center;
background: #f2f2f2;
height: 100vh;
}
.container .loginForm {
width: 40%;
height: 60%;
text-align: center;
background-color: #fff;
border-radius: 10px;
box-shadow: 1px 3px rgb(182, 169, 169);
}
<body>
<div class="container">
<div class="loginForm">
<div class="heading">
<h1>Hello heading</h1>
</div>
<div class="formContent">
<input type="text" />
</div>
</div>
</div>
</body>
Mainly assigning height as 100vh on all elements was causing this issue.
Hope that’s how you wanted it to look.
First of all you can declare you width in body and use
margin: 0 auto; to get div in center horizontally
than you can apply
display: flex;
align-items: center;
to center it vertically.
Now your parent element which is body have 100vh and your .container have 40rem height in this situation if you declare your
.container .loginForm {
height:100%;
}
it will take 40rem as a height which is .container(parent) height.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
font-family: serif;
}
body {
min-height: 100vh;
width: 35rem;
margin: 0 auto;
display: flex;
align-items: center;
}
.container {
height: 40rem;
background: #f2f2f2;
width: 100%;
}
.loginForm {
background-color: #fff;
border-radius: 1rem;
box-shadow: 0.1rem 0.3rem rgb(182, 169, 169);
height: 100%;
}
<div class="container">
<div class="loginForm">
<div class="heading">
<h1>Hello heading</h1>
</div>
<div class="formContent">
<form action="">
<input type="text" name="" id="" />
</form>
</div>
</div>
</div>
Im trying to create simple login form using html and css but my input field is displayed below the form what is error..
<body>
<div class="container">
<div class="loginForm">
<div class="heading">
<h1>Hello heading</h1>
</div>
<div class="formContent">
<input type="text" />
</div>
</div>
</div>
</body>
````````````````
my csss
```````````````
* {
padding: 0;
margin: 0;
font-family: serif;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
background: #f2f2f2;
}
.loginForm {
width: 350px;
height: 400px;
background-color: #fff;
border-radius: 10px;
box-shadow: 1px 3px rgb(182, 169, 169);
}
and this is the link online editor:
https://stackblitz.com/edit/web-platform-pmvylw?file=styles.css
