mobile styles media queries

mikebailey-sf · Jul 17, 2019 · 6ded54c · 6ded54c
1 parent b10445d
commit 6ded54c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git 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
@@ -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;
-}
+}
+
+@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
@@ -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'
         />