diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss
index e9c1959d88..380ccc8f73 100644
--- a/public/resources/css/layout/_layout.scss
+++ b/public/resources/css/layout/_layout.scss
@@ -45,6 +45,12 @@
 
 .l-offset-side-nav {
   padding-left: 224px;
+
+  @media handheld and (max-width: $phone-breakpoint),
+  screen and (max-device-width: $phone-breakpoint),
+  screen and (max-width: $tablet-breakpoint) {
+    padding-left: 0px;
+  }
 }
 
 .l-content {
diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss
index db7206c3a1..f5a8fc2110 100644
--- a/public/resources/css/module/_side-nav.scss
+++ b/public/resources/css/module/_side-nav.scss
@@ -9,6 +9,12 @@
   box-shadow: 3px 0px 6px rgba($coal, .3);
   width: 224px;
 
+  @media handheld and (max-width: $phone-breakpoint),
+  screen and (max-device-width: $phone-breakpoint),
+  screen and (max-width: $tablet-breakpoint) {
+    width: auto;
+  }
+
   a {
     text-decoration: none;
     display: block;