I have made a signup form for my website. But if I zoom or open it on my phone, some input fields are not visible. Can you help me to fix this error? My webpage is privately visible at http://lfsite.net/beta/signup.php. You will be asked for a username and password, use username: 'guest' and password: 'passw0rd!'. Please, can you help me fixing this problem? I want to publish my new site soon.
Regards, Luuk Faasse
分享 Change your css class to this and it will work.
.login-form {
width: 350px;
background: #eee;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
margin: auto;
left: 0;
right: 0;
padding: 40px 30px;
top: 20%;
}
@import url(https://fonts.googleapis.com/css?family=Vibur);
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: arial;
}
body {
background: #6b6cd0;
}
h1 {
color: #ccc;
text-align: center;
font-family: 'Vibur', cursive;
font-size: 50px;
}
.login-form {
width: 350px;
background: #eee;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
margin: auto;
left: 0;
right: 0;
padding: 40px 30px;
top: 20%;
}
.form-group {
position: relative;
margin-bottom: 15px;
}
.form-control {
width: 100%;
height: 50px;
border: none;
padding: 5px 7px 5px 15px;
background: #fff;
color: #666;
border: 2px solid #ddd;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.form-control:focus, .form-control:focus + .fa {
border-color: #10CE88;
color: #10CE88;
}
.form-group .fa {
position: absolute;
right: 15px;
top: 17px;
color: #999;
}
.log-status.wrong-entry {
-moz-animation: wrong-log 0.3s;
-webkit-animation: wrong-log 0.3s;
animation: wrong-log 0.3s;
}
.log-status.wrong-entry .form-control, .wrong-entry .form-control + .fa {
border-color: #ed1c24;
color: #ed1c24;
}
.log-btn {
background: #6b6cd0;
dispaly: inline-block;
width: 100%;
font-size: 16px;
height: 50px;
color: #fff;
text-decoration: none;
border: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.link {
text-decoration: none;
color: #C6C6C6;
float: right;
font-size: 12px;
margin-bottom: 15px;
}
.link:hover {
text-decoration: underline;
color: #8C918F;
}
.alert {
display: none;
font-size: 12px;
color: #f00;
float: left;
}
@-moz-keyframes wrong-log {
0%, 100% {
left: 0px;
}
20% , 60% {
left: 15px;
}
40% , 80% {
left: -15px;
}
}
@-webkit-keyframes wrong-log {
0%, 100% {
left: 0px;
}
20% , 60% {
left: 15px;
}
40% , 80% {
left: -15px;
}
}
@keyframes wrong-log {
0%, 100% {
left: 0px;
}
20% , 60% {
left: 15px;
}
40% , 80% {
left: -15px;
}
}<body>
<form method="post" action="//order.lfsite.net/register2.php">
<div class="login-form">
<center>
<img height="50px" src="assets/images/logo3.png">
</center>
<br>
<div class="form-group ">
<input placeholder="Username" class="form-control" type="text" name="username" value="" maxlength="16" onkeyup="return ismaxlength(this)" required="">
</div>
<div class="form-group">
<input placeholder="Password" class="form-control" type="password" name="password" maxlength="8" onkeyup="return ismaxlength(this)" required="">
</div>
<div class="form-group">
<input placeholder="Email" class="form-control" type="email" name="email" value="" required="">
</div>
<div class="form-group">
<select class="form-control" size="1" name="website_category">
<option selected="" disabled="" hidden="">Catogory</option>
<option>Personal</option>
<option>Business</option>
<option>Hobby</option>
<option>Forum</option>
<option>Adult</option>
<option>Dating</option>
<option>Software / Download</option>
</select>
</div>
<div class="form-group">
<select class="form-control" size="1" name="website_language">
<option selected="" disabled="" hidden="">Language</option>
<option>English</option>
<option>Non-English</option>
</select>
</div>
<input type="hidden" name="id" value="8e24468c854b633919fa9636b72aa393">
<img style="border: 2px solid #ddd; border-radius: 4px;" width="100%" src="http://order.lfsite.net/image.php?id=8e24468c854b633919fa9636b72aa393">
<div class="form-group">
<input class="form-control" type="text" name="number">
</div>
<input class="log-btn" type="submit" value="Register Account">
</div>
</form>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/signup.js"></script>
</body></div>
