Adjusted map width for mobile

.env

@@ -1,3 +1,5 @@
 SKIP_PREFLIGHT_CHECK=true
 
 REACT_APP_MAPBOX_ACCESS_TOKEN='pk.eyJ1IjoiZWxvaXNlYmFycm93IiwiYSI6ImNqenNpZGwyYzFtamIzY281ZThoZWNrMGEifQ.SWnRqoz8mwfwUpg0ci3Xkw'
+SKIP_PREFLIGHT_CHECK=true
+SKIP_PREFLIGHT_CHECK=true

package.json

@@ -1,5 +1,6 @@
 {
   "name": "recycle-nyc",
+  "homepage": "https://eloisebarrow.github.com/recycle-nyc",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -15,7 +16,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "deploy" : "npm run build&&gh-pages -d build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -31,5 +33,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^2.1.1"
   }
 }

src/App.css

@@ -127,7 +127,7 @@ html, body, #root {
   background-color: lightblue;
 }
 
-.map {
+.map-container {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -191,10 +191,19 @@ html, body, #root {
     height: 100px;
     margin: 0;
     padding: 0;
+    transform: translate(100,0);
   }
 
   .link-styles {
     font-size: 1.25rem;
   }
 
+  .borough-data-styles {
+    min-width: 200px;
+  }
+
+  .mapboxgl-map {
+    max-width: 700px;
+  }
+
 }

src/components/NearYou.js

@@ -33,7 +33,7 @@ class NearYou extends React.Component {
     const filteredCoords = this.props.apiData.filter( bin => (Math.pow(bin.latitude, 2) * Math.pow(bin.longitude, 2)) > 1);
 
     return (
-      <div className="map">
+      <div className="map-container">
         <h2>Public recycling bins near you:</h2>
         {this.state.located && <ReactMapGL
           mapStyle="mapbox://styles/eloisebarrow/cjzu271jb11xx1ck0q3wwz1je"