Reorganize the dashboard with one column for the tiny screens

1 files changed, 18 insertions, 6 deletions

diff --git a/plugins/Dashboard/stylesheets/dashboard.less b/plugins/Dashboard/stylesheets/dashboard.less
index 9a637dd5fb..2c4d502b65 100644
--- a/plugins/Dashboard/stylesheets/dashboard.less
+++ b/plugins/Dashboard/stylesheets/dashboard.less
@@ -1,17 +1,14 @@
 #dashboard {
-    padding: 0 0 0 7px;
-    margin: -4px -14px 0 -14px;
+    margin: 0 -7px;
 }
 
 #dashboardWidgetsArea {
-    padding: 2px 0 0 0;
+    padding-bottom: 100px;
 }
 
 .col {
     float: left;
-    padding-bottom: 100px;
     min-height: 100px;
-    -height: 100px;
 }
 
 .col.width-100 {
@@ -57,7 +54,6 @@
     overflow: hidden;
     border-radius: 4px;
     font-size: 14px;
-    border-radius: 4px;
 }
 
 .widgetHover {
@@ -457,4 +453,20 @@ div.widgetpreview-preview {
 #copyDashboardToUserConfirm .inputs label {
     width: 200px;
     float: left;
+}
+
+@media all and (max-width: 749px) {
+  #dashboardWidgetsArea {
+    padding-right: 7px;
+  }
+
+  .col.width-75,
+  .col.width-67,
+  .col.width-50,
+  .col.width-40,
+  .col.width-33,
+  .col.width-30,
+  .col.width-25 {
+    width: 100%;
+  }
 }
\ No newline at end of file