[gnome-web-www: 51/68] Fix the spacing of the boxes on donate page

[Tom Tryfonidis <tomtryf src gnome org>]

commit 66149cc35cb0a6f45cc63a03b49bcc472d0175ee
Author: Tom Tryfonidis <tomtryf gnome org>
Date:   Mon Jan 9 20:58:48 2017 +0200

    Fix the spacing of the boxes on donate page

 theme/css/responsive.css |   32 +++++++++++++++-----------------
 theme/page-donate.php    |   16 ++++++++--------
 2 files changed, 23 insertions(+), 25 deletions(-)
---
diff --git a/theme/css/responsive.css b/theme/css/responsive.css
index 67a1dd0..4a9d643 100644
--- a/theme/css/responsive.css
+++ b/theme/css/responsive.css
@@ -2,25 +2,20 @@
  * CSS Media queries for the GNOME Project website
  */
 
-@media screen and (min-width: 767px) {
-
-    /* Make equal height columns */
-
-    .equalizer,
-    .equalizer > div[class*='col-'] {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
-    }
-
-    .boxes {
-        margin: 15px 0;
-    }
+/* Make equal height columns */
+
+.equalizer,
+.equalizer > div[class*='col-'] {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
 
+@media screen and (min-width: 767px) {
     body { padding-top: 50px } /* height of the menu collapsed */
 
     .nav-bg {
@@ -77,6 +72,9 @@
 }
 
 @media screen and (max-width: 767px) {
+    .boxes {
+        margin: 15px 0;
+    }
     .navbar-default .navbar-nav .open .dropdown-menu > li > a {
         color: #ffffff;
     }
diff --git a/theme/page-donate.php b/theme/page-donate.php
index 965ddc7..30ca657 100644
--- a/theme/page-donate.php
+++ b/theme/page-donate.php
@@ -18,26 +18,26 @@
 
                 <!-- Donation Boxes -->
                 <div class="boxes-selection-container row equalizer">
-                    <div class="col-sm-3">
-                        <div class="boxes active col-sm-12" data-target="1">
+                    <div class="col-xs-6 col-sm-3">
+                        <div class="boxes active col-xs-12" data-target="1">
                             <p class="main_feature">PayPal</p>
                             <p><?php esc_html_e( 'Tax deductible in the United States', 'grass' ); ?></p>
                         </div>
                     </div>
-                    <div class="col-sm-3">
-                        <div class="boxes col-sm-12" data-target="2">
+                    <div class="col-xs-6 col-sm-3">
+                        <div class="boxes col-xs-12" data-target="2">
                             <p class="main_feature"><?php esc_html_e( 'Bank Transfer', 'grass' ); ?></p>
                             <p><?php esc_html_e( 'For EU bank account holders only; tax deductible', 'grass' 
); ?></p>
                         </div>
                     </div>
-                    <div class="col-sm-3">
-                        <div class="boxes col-sm-12" data-target="3">
+                    <div class="col-xs-6 col-sm-3">
+                        <div class="boxes col-xs-12" data-target="3">
                             <p class="main_feature"><?php /* translators: This is a payment option */ 
esc_html_e( 'Check', 'grass' ); ?></p>
                             <p><?php esc_html_e( 'Available to United States bank account holders; tax 
deductible', 'grass' ); ?></p>
                         </div>
                     </div>
-                    <div class="col-sm-3">
-                        <div class="boxes col-sm-12" data-target="4">
+                    <div class="col-xs-6 col-sm-3">
+                        <div class="boxes col-xs-12" data-target="4">
                             <p class="main_feature">Bitcoin</p>
                         </div>
                     </div>