From cec0c1dd856f708633965ae082c132abb45deaa2 Mon Sep 17 00:00:00 2001
From: magsout <guillaume.demesy@gmail.com>
Date: Wed, 26 Apr 2017 08:12:13 +0200
Subject: [PATCH] Issue #1491 - added more space on small screen between these
 icons

---
 .../static/css/development/components/footer.css  | 15 +++++++++++++--
 webcompat/templates/shared/footer.html            |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/webcompat/static/css/development/components/footer.css b/webcompat/static/css/development/components/footer.css
index 1affe6f00..60191cb05 100644
--- a/webcompat/static/css/development/components/footer.css
+++ b/webcompat/static/css/development/components/footer.css
@@ -5,6 +5,7 @@
   --Footer-backgroundColor: #fff;
   --Footer-border: var(--base-colorDark);
   --Footer-colorHover: var(--base-colorDark);
+  --Footer-withIcon : 1.5em;
 }
 
 .wc-Footer {
@@ -37,6 +38,16 @@
     }
   }
 
+  /* modifier */
+  @media all and (max-width: 37.51em) {
+    .wc-Footer-list--left {
+      display: flex;
+      align-content: space-between;
+      flex-flow: row wrap;
+      width: var(--Footer-withIcon);
+    }
+  }
+
   /* item */
   @media all and (min-width: 37.52em) {
     .wc-Footer-item + .wc-Footer-item {
@@ -72,8 +83,8 @@
 
   .wc-Footer-icon {
     display: block;
-    width: 1.5em;
-    height: 1.5em;
+    width: var(--Footer-withIcon);
+    height: var(--Footer-withIcon);
     overflow: hidden;
     background-repeat: no-repeat;
     color: transparent;
diff --git a/webcompat/templates/shared/footer.html b/webcompat/templates/shared/footer.html
index 9d051d1dc..e40337b47 100644
--- a/webcompat/templates/shared/footer.html
+++ b/webcompat/templates/shared/footer.html
@@ -23,7 +23,7 @@
           </a>
         </li>
       </ul>
-      <ul class="wc-Footer-list r-ResetList">
+      <ul class="wc-Footer-list wc-Footer-list--left r-ResetList">
         <li class="wc-Footer-item wc-Footer-item--follow">
           <a class="wc-Footer-link" href="https://twitter.com/webcompat/with_replies" target="_blank">
             <span class="wc-Footer-icon wc-Footer-icon--twitter">Follow on Twitter</span>