Improve container responsiveness (#74)

* consolidate container max widths * Update src/styles/_Grid.scss Co-authored-by: Joseph Fusco <josephfusco@users.noreply.github.com> Co-authored-by: Joseph Fusco <josephfusco@users.noreply.github.com>
wpengine · Mar 31, 2022 · 0b52d81 · 0b52d81 · headless-platform-by-wp-engine · Mar 31, 2022
1 parent 81b71c3
commit 0b52d81
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 24 deletions.
diff --git a/src/components/ContentWrapper/ContentWrapper.module.scss b/src/components/ContentWrapper/ContentWrapper.module.scss
@@ -1,7 +1,7 @@
 @import 'styles/Variables';
 
 .content {
-  max-width: $grid-max-width;
+  max-width: $content-max-width;
   margin: 0 auto;
   line-height: 1.6875;
 

diff --git a/src/styles/_Grid.scss b/src/styles/_Grid.scss
@@ -5,13 +5,19 @@
 
 .container {
   margin: 0 auto;
-  max-width: $grid-max-width;
+  max-width: $container-max-width;
   padding: 0 2rem;
   position: relative;
   width: 100%;
 
   &.small {
-    max-width: $container-max-width-sm;
+    max-width: $content-max-width;
+  }
+}
+
+@media (min-width: $breakpoint-medium) {
+  .container {
+    width: percentage(10/12);
   }
 }
 
@@ -180,24 +186,6 @@
   }
 }
 
-@media (min-width: 102.5rem) {
-  .container {
-    max-width: 120rem;
-  }
-}
-
-@media (max-width: 102.4rem) {
-  .container {
-    max-width: 102.4rem;
-  }
-}
-
-@media (max-width: 76.8rem) {
-  .container {
-    max-width: 76.8rem;
-  }
-}
-
 @media (min-width: 40rem) {
   .row {
     flex-direction: row;

diff --git a/src/styles/_Variables.scss b/src/styles/_Variables.scss
@@ -7,8 +7,8 @@ $breakpoint-extra-small: 640px;
 $breakpoint-small: 768px;
 $breakpoint-medium: 1024px;
 
-$grid-max-width: 62rem;
-$container-max-width: 102.4rem;
-$container-max-width-sm: 64rem;
+$container-max-width: 1200px;
+
+$content-max-width: 620px;
 
 $box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);