I'm working on designing a signup form with a background consisting of two different colors. The signup form should be positioned just above the background and centered. However, I've encountered issues with responsiveness, especially on mobile devices. For mobile design, I want a simple signup form without the background. It's possible that my positioning techniques (relative, absolute) are causing the problem.
Here is the code snippet:
.signup-form {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: #f2f2f2;
}
.signup-wrapper {
width: 100%;
background: #6493f3;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
align-items: stretch;
flex-direction: row-reverse;
}
.left-block {
width: calc(100% - 560px);
background: #6493f3;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: 1;
&::before {
content: '';
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
}
}
.right-block {
width: 560px;
min-height: 100vh;
display: block;
background-color: #f7f7f7;
padding: 50px 55px 55px 55px;
position: relative;
}
form {
background: #fff;
box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1);
position: absolute;
top: 120px;
left: -100px;
width: 450px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px;
}
.caption {
width: 100%;
display: flex;
font-size: 30px;
color: #444;
line-height: 1.2;
text-align: center;
padding: 20px;
flex: 1;
justify-content: center;
align-items: center;
}
.form-field {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 2rem;
}<div class="signup-form">
<div class="signup-wrapper">
<div class="right-block">
<form>
<span class="caption">Create An Account</span>
<div class="form-field">
<input type="text" placeholder="Full Name" />
</div>
<div class="form-field">
<input type="email" placeholder="Email" />
</div>
<div class="form-field">
<input type="password" placeholder="Password" />
</div>
<div class="form-field">
<input type="text" placeholder="Country" />
</div>
</form>
</div>
<div class="left-block">
</div>
</div>
</div>You can view the JSBin file here
Update:
This is the desired layout I'm aiming for: