Forms look better on small screens
This commit is contained in:
parent
c77b79e3ec
commit
b8491f96c7
3 changed files with 24 additions and 19 deletions
|
@ -105,19 +105,26 @@ html, body {
|
|||
|
||||
.auth_form {
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.auth_form table {
|
||||
margin: 20px auto;
|
||||
.auth_form_wrapper {
|
||||
margin: 1.5em auto;
|
||||
width: 90%;
|
||||
border-spacing: 0.3em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.auth_form th {
|
||||
label {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
vertical-align: text-top;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.auth_form_field {
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 0.2em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.errorlist {
|
||||
|
@ -131,10 +138,10 @@ input {
|
|||
}
|
||||
|
||||
input[type="text"], input[type="password"], input[type="email"] {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
max-width: 390px;
|
||||
padding: 1%;
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<tr>
|
||||
<th>{{ field.label_tag }}</th>
|
||||
<td>{{ field }} {{ field.errors }}</td>
|
||||
</tr>
|
||||
<div>
|
||||
{{ field.label_tag }}
|
||||
<div class="auth_form_field">{{ field }} {{ field.errors }}</div>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
<table>
|
||||
<tbody>
|
||||
{% for field in form %}
|
||||
{% include 'authens/form_field_snippet.html' with field=field %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="auth_form_wrapper">
|
||||
{% for field in form %}
|
||||
{% include 'authens/form_field_snippet.html' with field=field %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue