responsive: form design improved for small screens

This commit is contained in:
Serghei Mihai 2013-12-23 16:08:44 +01:00
parent 3df4b9d882
commit 7b6199700a
No known key found for this signature in database
GPG Key ID: 76D1C964BF2FA1AF
1 changed files with 29 additions and 10 deletions

View File

@ -3364,16 +3364,29 @@ body.largeText #content-core p {
.formControls {
width: 100%;
clear: both;
margin-bottom: 1em;
}
form {
width: 97% !important;
height: auto;
}
form label {
float: left;
width: 20% !important;
width: 23% !important;
position: relative !important;
margin: 2px 0px;
padding-right: 3px;
}
form input[type='text'], form input[type='submit'], form textarea, form select {
max-width: 100%;
margin-left: 22% !important;
form input[type='text'], form input[type='submit'], form textarea, form select,
form textarea#form-widgets-message{
width: 70% !important;
float: left;
margin-left: 5px !important;
margin: 2px 0px;
}
.labelboxes input[type='text'], .date-field input[type='text'], .date-field select {
@ -3389,8 +3402,13 @@ body.largeText #content-core p {
}
form .captchaImage {
max-width: 100%;
margin-left: 105px;
width: 70% !important;
float: left;
margin-left: 5px !important
}
form #form-buttons-send {
position: relative !important;
}
#realcontent img {
@ -3435,6 +3453,11 @@ body.largeText #content-core p {
dl.portlet ul.navTreeLevel1 .navTreeItem {
display: inline;
}
body.section-contacts #realcontent form, body.template-contact-info #content-core form, #contact-popup form {
margin-top: 5px;
padding: 5px;
}
}
@media screen and (min-width: 716px) and (max-width:950px) {
@ -3551,10 +3574,6 @@ body.largeText #content-core p {
float: left;
}
.formControls {
width: 100%;
}
form label {
float: left;
width: 25% !important;