fixed CSS positioning of validation error messages

css/css.css

@@ -9,18 +9,34 @@ html body label.required_label:after {
   position: absolute;
   width: 100%;
 }
-html body input ~ .ui-invalid-label {
+html body input ~ .ui-invalid-label,
+html body textarea ~ .ui-invalid-label,
+html body select ~ .ui-invalid-label {
   display: none;
 }
-html body input.invalid ~ .ui-invalid-label {
-  left: 0;
+html body input.invalid ~ .ui-invalid-label,
+html body textarea.invalid ~ .ui-invalid-label,
+html body select.invalid ~ .ui-invalid-label {
   bottom: 0;
-  margin-bottom: -1.35em;
+  right: 0;
+  margin-bottom: -1.25em;
   color: red;
   font-size: 0.75em;
   display: inline-block;
   position: absolute;
 }
+@media (max-width: 40em) {
+  html body input.invalid ~ .ui-invalid-label,
+  html body textarea.invalid ~ .ui-invalid-label,
+  html body select.invalid ~ .ui-invalid-label {
+    top: 0;
+    right: 0;
+    left: auto;
+    bottom: auto;
+    margin-bottom: auto;
+    margin-top: -1.75em;
+  }
+}
 /* ======================== disabled form fields ========================= */
 span.static {
   padding: 0 .5em;