Fix error styles for mobile

Signed-off-by: Josh Angell <josh@supercooldesign.co.uk>

2 files changed, 17 insertions, 3 deletions

diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 68534f5fd..e2a1b7a3d 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -386,18 +386,18 @@ label{
 /* form errors */
 div.form-error,
 p.form-error {
+  @include inline-block;
   background:#ff0000;
   color:#fff;
   padding:0 0.5em;
-  margin:0 0.6em 0 -0.5em;
-  width:auto;
+  margin:0 0 0 -0.5em;
   @include border-radius(0.25em 0.25em 0 0);
 }
 
 input.form-error,
 textarea.form-error {
   border-color:#ff0000;
-  @include border-radius(0 0 0.25em 0.25em);
+  @include border-radius(0 0.25em 0.25em 0.25em);
 }
 
 // don't display valid error boxes as now the jump won't be
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index c59e02c3d..32de2af43 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -364,6 +364,20 @@ textarea{
   max-width:25em;
 }
 
+
+/* form errors */
+div.form-error,
+p.form-error {
+  display:block;
+  width:25.25em;
+}
+
+input.form-error,
+textarea.form-error {
+  @include border-radius(0 0 0.25em 0.25em);
+}
+
+
 /* Report a problem sidebar notes */
 #report-a-problem-sidebar {
   position:absolute;