diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index 7dfddf7..5e2f3ef 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -1,4 +1,3 @@
-
 /* ---------- Basic Layout Styles ----------- */
 
 html,
@@ -8,7 +7,6 @@ body,
 }
 #page-wrapper {
   min-height: 100%;
-  min-width: 960px;
 }
 #header div.section,
 #featured div.section,
@@ -16,8 +14,9 @@ body,
 #main,
 #triptych,
 #footer-columns,
-#footer {
-  width: 960px;
+#footer-wrapper .section {
+  width: 100%;
+  max-width: 1200px; /* @TODO Find proper breakpoint */
   margin-left: auto;
   margin-right: auto;
 }
@@ -34,40 +33,6 @@ body,
 .without-secondary-menu .region-header {
   margin-top: 15px;
 }
-#secondary-menu {
-  position: absolute;
-  right: 0; /* LTR */
-  top: 0;
-  width: 480px;
-}
-#content,
-#sidebar-first,
-#sidebar-second,
-.region-triptych-first,
-.region-triptych-middle,
-.region-triptych-last,
-.region-footer-firstcolumn,
-.region-footer-secondcolumn,
-.region-footer-thirdcolumn,
-.region-footer-fourthcolumn {
-  display: inline;
-  float: left; /* LTR */
-  position: relative;
-}
-.one-sidebar #content {
-  width: 720px;
-}
-.two-sidebars #content {
-  width: 480px;
-}
-.no-sidebars #content {
-  width: 960px;
-  float: none;
-}
-#sidebar-first,
-#sidebar-second {
-  width: 240px;
-}
 #main-wrapper {
   min-height: 300px;
 }
@@ -78,23 +43,63 @@ body,
 .breadcrumb {
   margin: 0 15px;
 }
-.region-triptych-first,
-.region-triptych-middle,
-.region-triptych-last {
-  margin: 20px 20px 30px;
-  width: 280px;
-}
 #footer-wrapper {
-  padding: 35px 5px 30px;
+  padding: 35px 0 30px;
 }
-.region-footer-firstcolumn,
-.region-footer-secondcolumn,
-.region-footer-thirdcolumn,
-.region-footer-fourthcolumn {
-  padding: 0 10px;
-  width: 220px;
+#footer-wrapper .section {
+  box-sizing: border-box;
+  padding: 0 15px;
 }
-#footer {
-  width: 940px;
-  min-width: 920px;
+@media all and (min-width: 0) { /* @TODO Find proper breakpoint */
+  #secondary-menu {
+    position: absolute;
+    right: 0; /* LTR */
+    top: 0;
+    width: 480px;
+  }
+}
+@media all and (min-width: 700px) { /* @TODO Find proper breakpoint */
+  #content,
+  #sidebar-first,
+  #sidebar-second,
+  .region-triptych-first,
+  .region-triptych-middle,
+  .region-triptych-last,
+  .region-footer-firstcolumn,
+  .region-footer-secondcolumn,
+  .region-footer-thirdcolumn,
+  .region-footer-fourthcolumn {
+    display: inline;
+    float: left; /* LTR */
+    position: relative;
+  }
+  .one-sidebar #content {
+    width: 75%;
+  }
+  .two-sidebars #content {
+    width: 50%;
+  }
+  .no-sidebars #content {
+    width: 100%;
+    float: none;
+  }
+  #sidebar-first,
+  #sidebar-second {
+    width: 25%;
+  }
+  .region-triptych-first,
+  .region-triptych-middle,
+  .region-triptych-last {
+    box-sizing: border-box;
+    padding: 20px 20px 30px;
+    width: 33%;
+  }
+  .region-footer-firstcolumn,
+  .region-footer-secondcolumn,
+  .region-footer-thirdcolumn,
+  .region-footer-fourthcolumn {
+    box-sizing: border-box;
+    padding: 0 10px;
+    width: 25%;
+  }
 }
diff --git a/core/themes/bartik/css/maintenance-page.css b/core/themes/bartik/css/maintenance-page.css
index c13c77b..e0c79c6 100644
--- a/core/themes/bartik/css/maintenance-page.css
+++ b/core/themes/bartik/css/maintenance-page.css
@@ -1,4 +1,3 @@
-
 body.maintenance-page {
   background-color: #fff;
   color: #000;
@@ -9,25 +8,19 @@ body.maintenance-page {
   margin-right: auto;
   min-width: 0;
   min-height: 0;
-  width: 800px;
   border: 1px solid #ddd;
   margin-top: 40px;
 }
 .maintenance-page #page {
-  margin: 20px 40px 40px;
+  margin: 10px;
 }
 .maintenance-page #main-wrapper {
   min-height: inherit;
 }
 .maintenance-page #header,
-.maintenance-page #messages,
-.maintenance-page #main {
+.maintenance-page #messages {
   width: auto;
 }
-.maintenance-page #header div.section,
-.maintenance-page #main {
-  width: 700px;
-}
 .maintenance-page #main {
   margin: 0;
 }
@@ -61,7 +54,21 @@ body.maintenance-page {
 .maintenance-page #messages div.messages {
   margin: 0;
 }
-.maintenance-page #messages div.section {
-  padding: 0;
-  width: auto;
+@media all and (min-width: 800px) {
+  .maintenance-page #page-wrapper {
+    width: 800px;
+  }
+  .maintenance-page #header div.section,
+  .maintenance-page #main {
+    width: 700px;
+  }
+  .maintenance-page #messages div.section {
+    padding: 0;
+    width: auto;
+  }
+}
+@media all and (min-width: 600px) { /* @TODO find the proper breakpoint */
+  .maintenance-page #page {
+    margin: 20px 40px 40px;
+  }
 }