From 20e7b9a87d76a5224564621f24b80b059d3e3fa9 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 5 Dec 2015 01:09:51 -0800
Subject: [PATCH] Tweak column sizes

---
 src/components/ha-zone-cards.html | 20 ++++++++++++++++----
 src/layouts/partial-zone.js       |  2 +-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/ha-zone-cards.html b/src/components/ha-zone-cards.html
index b8c35253b9..1353366c06 100644
--- a/src/components/ha-zone-cards.html
+++ b/src/components/ha-zone-cards.html
@@ -23,14 +23,26 @@
       text-align: center;
     }
 
-    .column {
-      max-width: 500px;
-    }
-
     .zone-card {
       margin-left: 8px;
       margin-bottom: 8px;
     }
+
+    @media (max-width: 500px) {
+      :host {
+        padding-right: 0;
+      }
+
+      .zone-card {
+        margin-left: 0;
+      }
+    }
+
+    @media (min-width: 2000px) {
+      .column {
+        max-width: 500px;
+      }
+    }
   </style>
 
   <template>
diff --git a/src/layouts/partial-zone.js b/src/layouts/partial-zone.js
index 2118fc2ebd..737e18f3bf 100644
--- a/src/layouts/partial-zone.js
+++ b/src/layouts/partial-zone.js
@@ -74,7 +74,7 @@ export default new Polymer({
     this.windowChange = this.windowChange.bind(this);
     const sizes = [];
     for (let col = 0; col < 5; col++) {
-      sizes.push(278 + col * 278);
+      sizes.push(300 + col * 300);
     }
     this.mqls = sizes.map(width => {
       const mql = window.matchMedia(`(min-width: ${width}px)`);