Моя форма регистрации не отвечает
Я сделал регистрационную форму для моего сайта. Но если я увеличу или открою его на своем телефоне, некоторые поля ввода не будут видны.
Можете ли вы помочь мне исправить эту ошибку?
Моя веб-страница в частном порядке видна на http://lfsite.net/beta/signup.php.
Вам будет предложено ввести имя пользователя и пароль, используйте имя пользователя: ‘guest’ и пароль: ‘passw0rd!’.
Пожалуйста, вы можете помочь мне решить эту проблему? Я хочу опубликовать мой новый сайт в ближайшее время.
С уважением, Луук Фаасс
Решение
Измените свой класс CSS на это, и это будет работать.
.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>Другие решения
Других решений пока нет …