[gnome-web-www: 20/68] fog: Fix boxes height on mobile viewport

[Tom Tryfonidis <tomtryf src gnome org>]

commit bcff454c894fdd57825218f3a8722cdbac802969
Author: Tom Tryfonidis <tomtryf gnome org>
Date:   Thu Dec 8 11:27:53 2016 +0200

    fog: Fix boxes height on mobile viewport

 theme/css/responsive.css |   22 ++++++++++++++++------
 theme/page-donate.php    |   16 ++++++++--------
 2 files changed, 24 insertions(+), 14 deletions(-)
---
diff --git a/theme/css/responsive.css b/theme/css/responsive.css
index f79e0d4..f7973ed 100644
--- a/theme/css/responsive.css
+++ b/theme/css/responsive.css
@@ -23,15 +23,25 @@
 
 /* Make equal height columns */
 
-@media screen and (min-width: 768px) {
-    .equalizer, .equalizer > div[class*='col-'] {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
+.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 (max-width: 767px) {
+    .boxes {
+        margin: 15px 0;
     }
 }
 
+
 /*--------------General------------------------*/
 @media(max-width: 767px) {
     img {
diff --git a/theme/page-donate.php b/theme/page-donate.php
index a5f2bd3..63da6d8 100644
--- a/theme/page-donate.php
+++ b/theme/page-donate.php
@@ -24,26 +24,26 @@ function matching_donation_text() {
                                <div class="clearfix"></div>
                 
                                <div class="boxes-container row equalizer">
-                    <div class="col-sm-3">
-                        <div class="boxes active col-sm-12" target="1">
+                    <div class="col-xs-6 col-sm-3">
+                        <div class="boxes active col-xs-12" target="1">
                             <p class="main_feature">PayPal</p>
                             <p><?php _e( 'Tax deductible in the United States', 'grass' ); ?></p>
                         </div>
                     </div>
-                    <div class="col-sm-3">
-                        <div class="boxes col-sm-12" target="2">
+                    <div class="col-xs-6 col-sm-3">
+                        <div class="boxes col-xs-12" target="2">
                             <p class="main_feature"><?php _e( 'Bank Transfer', 'grass' ); ?></p>
                             <p><?php _e( 'For EU bank account holders only; tax deductible', 'grass' ); 
?></p>
                         </div>
                     </div>
-                    <div class="col-sm-3">
-                        <div class="boxes col-sm-12" target="3">
+                    <div class="col-xs-6 col-sm-3">
+                        <div class="boxes col-xs-12" target="3">
                             <p class="main_feature"><?php _e( 'Check', 'grass' ); ?></p>
                             <p><?php _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" target="4">
+                    <div class="col-xs-6 col-sm-3">
+                        <div class="boxes col-xs-12" target="4">
                             <p class="main_feature">Bitcoin</p>
                         </div>
                     </div>