diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index 5d65654cc..4c2369697 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -170,6 +170,8 @@ h4 {
   position: relative;
   background-color: white;
   overflow: hidden;
+  padding-left: 24%;
+  transition: padding-left .2s ease-out;
 
   > .container {
     margin: 20px 0;
@@ -180,6 +182,27 @@ h4 {
   }
 }
 
+@media (min-width: 1200px) {
+
+  .main__content {
+    padding-left: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .main__content {
+    padding-left: 50px;
+  }
+}
+
+@media (max-width: 425px) {
+
+  .main__content {
+    padding-left: 0;
+  }
+}
+
 .main__content-body {
   padding: 0 40px 60px;
 }
@@ -191,6 +214,13 @@ h4 {
   }
 }
 
+@media (max-width: 425px) {
+
+  .main__content-body {
+    padding: 10px;
+  }
+}
+
 .pseudo-focus {
   outline: 5px auto var(--color-light);
   outline: 5px auto -webkit-focus-ring-color;
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 8dce6117c..0aa929de6 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -7,21 +7,19 @@
   min-height: calc(100% - var(--header-height));
   transition: all .2s ease-out;
   width: 24%;
-
-  ~ .main__content {
-    padding-left: 24%;
-    transition: padding-left .2s ease-out;
-  }
 }
 
 /* maximum width of 300px for wide screens */
 @media (min-width: 1200px) {
   .main__aside {
     width: 300px;
+  }
+}
 
-    ~ .main__content {
-      padding-left: 300px;
-    }
+@media (max-width: 425px) {
+
+  .main__aside {
+    display: none;
   }
 }
 
@@ -166,10 +164,6 @@
     overflow: hidden;
     min-height: calc(100% - var(--header-height-collapsed));
 
-    ~ .main__content {
-      padding-left: 50px;
-    }
-
     .asidenav__box-title {
       width: 50px;
       padding: 1px;