diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss index 09bd126..fe33e8e 100644 --- a/_sass/minima/_base.scss +++ b/_sass/minima/_base.scss @@ -257,6 +257,11 @@ table { color: $table-text-color; border-collapse: collapse; border: 1px solid $table-border-color; + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + tr { &:nth-child(even) { background-color: $table-zebra-color; @@ -274,9 +279,7 @@ table { } @include media-query($on-laptop) { - display: block; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; + display: table; + overflow-x: visible; } } diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss index 01e64ce..ac3d9d2 100644 --- a/_sass/minima/_layout.scss +++ b/_sass/minima/_layout.scss @@ -17,9 +17,10 @@ letter-spacing: -1px; margin-bottom: 0; float: left; + padding-right: 45px; @include media-query($on-palm) { - padding-right: 45px; + padding-right: 0; } &, diff --git a/_sass/minima/initialize.scss b/_sass/minima/initialize.scss index 76efd77..7a38c58 100644 --- a/_sass/minima/initialize.scss +++ b/_sass/minima/initialize.scss @@ -29,10 +29,9 @@ $on-large: $on-laptop !default; // padding-left: $spacing-unit / 2; // } // } -// Notice the following mixin uses max-width, in a deprecated, desktop-first -// approach, whereas media queries used elsewhere now use min-width. +// The following mixin uses a modern, mobile-first approach. @mixin media-query($device) { - @media screen and (max-width: $device) { + @media screen and (min-width: $device) { @content; } }