From 6ded54c8a4d7fffba16ad83b2bdff6a09e6747fa Mon Sep 17 00:00:00 2001
From: Mike <mikeyobviously@gmail.com>
Date: Wed, 17 Jul 2019 00:13:28 -0700
Subject: [PATCH] mobile styles media queries

---
 public/index.html      |  2 +-
 src/App.css            | 37 ++++++++++++++++++++++++-------------
 src/components/Map.jsx |  2 +-
 3 files changed, 26 insertions(+), 15 deletions(-)
diff --git a/public/index.html b/public/index.html
index e8f6b9d..4265c48 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta content="width=device-width, initial-scale=1" name="viewport" />
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/App.css b/src/App.css
index 9ba184f..3b44773 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,14 +1,3 @@
-@media only screen 
-  and (min-device-width: 320px) 
-  and (max-device-width: 480px)
-  and (-webkit-min-device-pixel-ratio: 2) {
-  
-
-  .logo{
-    font-size: 3vh;
-    letter-spacing: 2vh;
-  }
-}
 
 
 .App {
@@ -72,7 +61,7 @@ a {
 
 .map-container {
   margin: 0 auto;
-  width: 450px;
+  width: 400px;
 }
 
 .cta {
@@ -129,4 +118,26 @@ display: inline;}
 .NavBar {
   margin-bottom: 20px;
   font-size: 5vh;
-}
\ No newline at end of file
+}
+
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: portrait) {
+
+  .logo{
+    font-size: 10vh;
+    letter-spacing: 2vh;
+    display: flex;
+  }
+
+  h1, h2{
+    font-size: 1.5rem;
+  }
+
+  .cta {
+    font-size: 1.5em;
+  }
+
+}
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index acc09e0..9f33c81 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -33,7 +33,7 @@ class Map extends Component {
           map = {this.map}
           need = {this.props.need}
           onClick={area => this.props.selectDistrict(area.alt)}
-          width = {450}
+          width = {400}
           imgWidth = {783}
           src='https://i.imgur.com/yDK9h4z.png'
         />
