diff --git a/src/layouts/home-assistant-main.html b/src/layouts/home-assistant-main.html
index c4b3681e88..46efeb7eda 100644
--- a/src/layouts/home-assistant-main.html
+++ b/src/layouts/home-assistant-main.html
@@ -17,10 +17,10 @@
   <template>
     <notification-manager></notification-manager>
     <more-info-dialog></more-info-dialog>
-    <iron-media-query query="(max-width: 600px)" query-matches="{{narrow}}">
+    <iron-media-query query="(max-width: 870px)" query-matches="{{narrow}}">
     </iron-media-query>
 
-    <paper-drawer-panel id='drawer' force-narrow='[[computeForceNarrow(narrow, showSidebar)]]'>
+    <paper-drawer-panel id='drawer' force-narrow='[[computeForceNarrow(narrow, showSidebar)]]' responsive-width='0'>
       <ha-sidebar drawer></ha-sidebar>
 
       <template is='dom-if' if='[[isSelectedStates]]'>
diff --git a/src/layouts/partial-zone.js b/src/layouts/partial-zone.js
index 10720eb17e..2d0adcb6a9 100644
--- a/src/layouts/partial-zone.js
+++ b/src/layouts/partial-zone.js
@@ -72,6 +72,7 @@ export default new Polymer({
     showMenu: {
       type: Boolean,
       value: false,
+      observer: 'windowChange',
     },
 
     states: {
@@ -86,19 +87,15 @@ export default new Polymer({
 
   created() {
     this.windowChange = this.windowChange.bind(this);
-  },
-
-  attached() {
     const sizes = [];
-    for (let i = 0; i < 4; i++) {
-      sizes.push(940 + i * 350);
+    for (let i = 0; i < 5; i++) {
+      sizes.push(278 + i * 278);
     }
     this.mqls = sizes.map(width => {
       const mql = window.matchMedia(`(min-width: ${width}px)`);
       mql.addListener(this.windowChange);
       return mql;
     });
-    this.windowChange();
   },
 
   detached() {
@@ -106,7 +103,8 @@ export default new Polymer({
   },
 
   windowChange() {
-    this.columns = this.mqls.reduce((cols, mql) => cols + mql.matches, 1);
+    const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
+    this.columns = Math.max(1, matchColumns - this.showMenu);
   },
 
   handleRefresh() {