css layout change only in content block

app/assets/stylesheets/small.scss

@@ -1,8 +1,8 @@
 @import "parameters";
 
 /* Styles specific to a small screen, such as iPhone, Android, etc... */
-@media (max-width: 640px) {
-  body {
+
+body.small {
 
   input[type="submit"],
   input[type="text"] {
@@ -60,11 +60,9 @@
 
     ul {
       border-top: 1px solid #eee;
-
       li {
         border-bottom: 1px solid #eee;
         border-right: none;
-
         > a {
           border-radius: 0;
           width: 100%;
@@ -94,33 +92,6 @@
     display: inline-block;
   }
   
-    &.map-layout {
-      #sidebar, #map {
-        position: relative;
-        overflow-x: hidden;
-        width: 100%;
-        height: 50%;
-      }
-
-      .overlay-sidebar {
-        #sidebar {
-          position: absolute;
-          width: 300px;
-          height: auto;
-          overflow: hidden;
-        }
-
-        #map {
-          height: 100%;
-        }
-      }
-
-      #map-ui {
-        z-index: 9999;
-        width: 100%;
-        overflow-y: scroll;
-      }
-    }
 
   .overlay-sidebar #sidebar .welcome.visible {
     display: none;
@@ -173,8 +144,7 @@
 
   #userinformation .deemphasize {
     position: relative;
-      right: auto;
-      left: auto;
+    right: auto; left: auto;
     margin-top: 10px;
     top: auto;
   }
@@ -184,4 +154,33 @@
   }
 
 }
+
+@media (max-width: 767.98px) {
+  body.map-layout {
+    #sidebar, #map {
+      position: relative;
+      overflow-x: hidden;
+      width: 100%;
+      height: 50%;
+    }
+
+    .overlay-sidebar {
+      #sidebar {
+        position: absolute;
+        width: 300px;
+        height: auto;
+        overflow: hidden;
+      }
+
+      #map {
+        height: 100%;
+      }
+    }
+
+    #map-ui {
+      z-index: 9999;
+      width: 100%;
+      overflow-y: scroll;
+    }
+  }
 }