Fixed columns on IE when device width is small

bencoveney · Sep 14, 2016 · 6ed8a43 · 6ed8a43
1 parent a77f097
commit 6ed8a43
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/src/_Column.scss b/src/_Column.scss
@@ -8,6 +8,11 @@
   min-width: $container-max-width / $maximum-items-per-row;
   margin-bottom: $gutter-width-vertical;
   padding: 0 $gutter-width;
+
+  // Smaller than mobile screen
+  @media (max-width: $columns-as-rows-threshold) {
+    flex-basis: auto;
+  }
 }
 
 // Vertical alignment options.
@@ -68,6 +73,7 @@
   @media (min-width: $columns-as-rows-threshold) {
     @for $i from 1 through $maximum-items-per-row {
       $percent: percentage((1 / $maximum-items-per-row) * $i);
+
       &.#{$rule-prefix}column-wide-#{$i} {
         @include column-wide($percent);
       }
@@ -80,6 +86,7 @@
   @media (min-width: $columns-as-rows-threshold) {
     @for $i from 1 through $maximum-items-per-row {
       $percent: percentage((1 / $maximum-items-per-row) * $i);
+
       &.#{$rule-prefix}column-offset-#{$i} {
         @include column-offset($percent);
       }

diff --git a/src/_Page.scss b/src/_Page.scss
@@ -10,8 +10,8 @@
 
   h1.title {
     background-color: transparent;
-    font-size: 4em;
     border-bottom: 0;
+    font-size: 4em;
     margin: 0;
     padding: 0;
     text-shadow: 2px 2px 5px $shadow-color;
@@ -22,9 +22,9 @@
 // Gives full width muted footer styling.
 .footer {
   background-color: $background-color-shaded;
+  border-top: .1rem solid $theme-color;
   color: $foreground-color-lightened;
   margin-top: 4.7rem;
-  padding: 2.4rem 2.4rem 4.8rem 2.4rem;
+  padding: 2.4rem 2.4rem 4.8rem;
   text-align: center;
-  border-top: .1rem solid $theme-color;
 }
diff --git a/src/_Row.scss b/src/_Row.scss
@@ -10,7 +10,7 @@
   flex-wrap: wrap;
 
   // Fill the parent container
-  width: calc(100% + 2.0rem);
+  width: calc(100% + 2rem);
 
   // Smaller than mobile screen
   @media (max-width: $columns-as-rows-threshold) {

diff --git a/src/_Text.scss b/src/_Text.scss
@@ -14,8 +14,8 @@ body {
 
 // Reset options
 *,
-*:after,
-*:before {
+*::after,
+*::before {
   // Set box-sizing globally to handle padding and border widths
   box-sizing: inherit;
 

diff --git a/src/_Variables.scss b/src/_Variables.scss
@@ -1,7 +1,7 @@
 // An optional prefix to place in front of all css rules.
 // This allows for compatibility with other frameworks which share class names (i.e. Bootstrap, Milligram).
-// Example: "mg-"
-$rule-prefix: "" !default;
+// Example: 'mg-'
+$rule-prefix: '' !default;
 
 // Grid width
 $container-max-width: 120rem !default;
@@ -29,7 +29,7 @@ $theme-color-darkened: #793d9e !default;
 
 $foreground-color: #222 !default;
 $foreground-color-lightened: #777 !default;
-$foreground-color-inverted: #FFF !default;
+$foreground-color-inverted: #fff !default;
 
 $background-color-shaded: #eee !default;
 $background-color-inverted: #222 !default;