From d1d9878ab6ea04a05960a52fe0fc6dab371831e4 Mon Sep 17 00:00:00 2001
From: Sebastian Claesson Hoffback <sebastian.claesson@gmail.com>
Date: Mon, 18 May 2015 13:59:42 +0200
Subject: [PATCH] Fix content-edit-view on mobile devices

The content editing view did not work at all on small screens. The label
took to much space, leaving the controller with almost none. Now the
label and the controller get its own row on smaller screens. Much
cleaner look and you can acctually edit a page on a small screen. Note:
Grids still don't work well.
---
 src/Umbraco.Web.UI.Client/src/less/forms.less | 14 ++++++++++++++
 src/Umbraco.Web.UI.Client/src/less/main.less  |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
index 1091a95ea8..dc59a4b6ab 100644
--- a/src/Umbraco.Web.UI.Client/src/less/forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -794,3 +794,17 @@ legend + .control-group {
     position: relative;
     z-index: 1000;
 }
+
+
+
+@media (max-width: 767px) {
+
+  // Labels on own row
+  .form-horizontal .control-label {
+    width: 100%;
+  }
+  .form-horizontal .controls {
+    margin-left: 0;
+  }
+
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less
index 379f65b10a..fcdc683182 100644
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -146,7 +146,7 @@ h5{
 
 .controls-row {
   padding-top: 5px;
-  margin-left: 240px !important;
+  margin-left: 240px;
 }
 .controls-row label {
   display: inline-block