Issue #1491 - added more space on small screen between these icons

webcompat · Apr 26, 2017 · cec0c1d · cec0c1d
1 parent d97f35e
commit cec0c1d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git 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
@@ -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>