From 8e38824170dfb81526bcc9d8bcf855751535558c Mon Sep 17 00:00:00 2001
From: Antti Pilto <antti.pilto@student.oulu.fi>
Date: Fri, 24 Mar 2017 21:02:33 +0200
Subject: [PATCH] reduced margins for mobile browsers

---
 src/components/App/App.scss        |  3 +++
 src/components/Footer/Footer.jsx   | 16 ++++++++--------
 src/components/Game/Question.scss  |  9 +++++++++
 src/components/Game/ShowStage.scss |  4 ++++
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/App/App.scss b/src/components/App/App.scss
index 7f48e9a..9c6fb85 100644
--- a/src/components/App/App.scss
+++ b/src/components/App/App.scss
@@ -13,6 +13,9 @@ body {
     padding-bottom: 20px;
     border-bottom: 1px #dadada solid;
     min-height: 500px; /* 690 */
+    @media (max-width: 768px) {
+        min-height: auto;
+    }
 }
 .container {
     margin: 0 auto;
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 25ce71c..a5fc742 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -12,19 +12,19 @@ class Footer extends Component {
                     If you are a beginner, you might want to start by choosing the first two groups (a -&gt; ko) of hiragana. Once you manage to pass the last stage, add in one or two more groups. Aim for the perfection - you want to be answering quickly.</p>
                     <p>Have fun!</p>
 
-                    <h4>Update - 18 March 2017</h4>
-                    <p>* Bugfix: Fixed unintended behavior when same group was selected from both hiragana &amp; katakana. Thanks for the bug report!</p>
+                    <h4>Updates</h4>
+                    <p>
+                        <strong>24 March 2017</strong> &middot; Enhancement: Improved mobile browser usability with reduced margins.<br />
+                        <strong>18 March 2017</strong> &middot; Bugfix: Fixed unintended behavior when same group was selected from both hiragana &amp; katakana. Thanks for the bug report!
+                    </p>
                     <p>Coders needed! This app is open source, but I'm currently the only one working on it. If you'd like to practice your React.js skills,
                         feel free to check the issues and fork it on <a href="https://github.com/anzzstuff/kanaquiz">GitHub</a>!</p>
-
-                    <h4>Launch - 14 Aug 2016</h4>
                     <p>
-                        Here we are finally with a new version of Kana Quiz.
+                        <strong>14 Aug 2016</strong> &middot; Launch: Here we are finally with a new version of Kana Quiz.
                         This app doesn't require flash anymore, and should work great with mobile phones and tablets.
                         Note that this is still a beta version, so there may be a few quirks. I would love to hear
-                        your thoughts, so if you'd like, be sure to shoot me some feedback using {' '}
-                        <a href="https://goo.gl/forms/BwtgpkYjT1iyH8uE3">this form</a>! {' '}
-                        If you for some reason want to use the old version, it's still available <a href="http://simplemedia.org/kana/flash/">here</a>.
+                        your thoughts, so if you'd like, be sure to shoot me some <a href="https://goo.gl/forms/BwtgpkYjT1iyH8uE3">feedback</a>! {' '}
+                        If you for some reason want to use the old version, it's still available <a href="http://simplemedia.org/kana/flash/" rel="nofollow">here</a>.
                     </p>
                     <div className="copyright">&copy; <a href="http://simplemedia.org/">Antti Pilto</a> 2016</div>
                 </div>
diff --git a/src/components/Game/Question.scss b/src/components/Game/Question.scss
index 4c51f2d..825c0f9 100644
--- a/src/components/Game/Question.scss
+++ b/src/components/Game/Question.scss
@@ -20,6 +20,9 @@
         padding: 8px;
         margin: 30px auto 28px;
         border-radius: 3px;
+        @media (max-width: 768px) {
+            margin: 0px auto 0px;
+        }
     }
     .size-up {
         font-size: 1.1em;
@@ -59,6 +62,9 @@
         min-width: 90px;
         font-size: 2em;
         margin: 30px 0 60px;
+        @media (max-width: 768px) {
+            margin: 0px 0 15px;
+        }
     }
     .answer-input, .answer-input:focus {
         outline: none;
@@ -69,6 +75,9 @@
         background: none;
         border: none;
         border-bottom: solid 1px #aaa;
+        @media (max-width: 768px) {
+            margin: 0px 0 25px;
+        }
     }
     .no-hover {
         /* disables hover effect on touch screens */
diff --git a/src/components/Game/ShowStage.scss b/src/components/Game/ShowStage.scss
index e9224b3..d5cf8c9 100644
--- a/src/components/Game/ShowStage.scss
+++ b/src/components/Game/ShowStage.scss
@@ -9,6 +9,10 @@
     h3 {
         margin-top: 30px;
     }
+    @media (max-width: 768px) {
+        margin-top: 100px;
+        margin-bottom: 100px;
+    }
 }
 .show-end {
     margin-top: 80px;