odin-codespace/signup_form/css/style.css

65 lines
1.1 KiB
CSS

.container {
justify-content: center;
display: flex;
align-items: center;
align-content: center;
}
.form {
width: 50vw;
}
.form-input {
margin-bottom: 40px;
display: flex;
justify-content: flex-start;
flex-direction: column;
}
.form-input input[type='text'],
.form-input input[type='password'],
.form-input input[type='email'] {
background-color: #FFFFFF;
border: 1px solid #D6D9DC;
border-radius: 3px;
width: 100%;
padding: 7px;
font-size: 14px;
}
.form-input label {
margin-bottom: 5px;
}
@media only screen and (min-width: 700px) {
.container {
height: 95vh;
}
.sidebar {
width: 50vw;
}
.form {
width: 50vw;
}
form {
display: flex;
flex-wrap: wrap;
width: 600px;
gap: 20px;
}
.form-input {
align-items: flex-start; /* To avoid stretching */
margin-bottom: 10px;
}
.form-input input[type='text'],
.form-input input[type='password'],
.form-input input[type='email'] {
width: 250px;
height: initial;
}
.form-input label {
width: 250px;
}
}