From d7ad3f85bdb559b9c36195de31d3218209305716 Mon Sep 17 00:00:00 2001
From: Rob Kirby <robkirby@live.co.uk>
Date: Mon, 8 May 2017 22:14:21 +0100
Subject: [PATCH] Option for responsive gutters

Added $global-gutter-small var to settings and media-query to allow for
different gutter sizes on mobile and desktop
---
 scss/_global.scss                 | 4 ++++
 scss/components/_media-query.scss | 4 ++--
 scss/settings/_settings.scss      | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/scss/_global.scss b/scss/_global.scss
index 4f2288a1..971533e2 100755
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -62,6 +62,10 @@ $global-width-small: 95% !default;
 /// @type length
 $global-gutter: 16px !default;
 
+/// Gutter for grid elements on small screens.
+/// @type length
+$global-gutter-small: $global-gutter !default;
+
 /// Body background color.
 /// @type Length
 $body-background: $light-gray !default;
diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index 52c94fad..983df61b 100755
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -28,8 +28,8 @@
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    padding-left: $global-gutter !important;
-    padding-right: $global-gutter !important;
+    padding-left: $global-gutter-small !important;
+    padding-right: $global-gutter-small !important;
 
     // Nested columns won't double the padding
     .column,
diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index c990c5e4..d1a8006a 100644
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -30,6 +30,7 @@ $pre-color: #ff6908;
 $global-width: 580px;
 $global-width-small: 95%;
 $global-gutter: 16px;
+$global-gutter-small: $global-gutter;
 $body-background: $light-gray;
 $container-background: $white;
 $global-padding: 16px;
-- 
2.47.2