Make map responsive

Keep all visible in nav

src/components/Map/Map.js

@@ -14,7 +14,7 @@ class Map extends React.Component {
   };
 
   render() {
-    const CeremonyGoogleMap = withGoogleMap(() => (
+    const GMap = withGoogleMap(() => (
       <GoogleMap
         defaultZoom={this.props.defaultZoom}
         defaultCenter={{ lat: this.props.lat, lng: this.props.lng }}
@@ -29,12 +29,25 @@ class Map extends React.Component {
       </GoogleMap>
     ));
     return (
-      <CeremonyGoogleMap
+      <GMap
         containerElement={
-          <div style={{ height: '360px', width: '360px' }} />
+          <div
+            style={{
+              height: '360px',
+              width: '100%',
+              'max-width': '480px',
+              overflow: 'hidden',
+            }}
+          />
         }
         mapElement={
-          <div style={{ height: '360px', width: '360px' }} />
+          <div
+            style={{
+              height: '360px',
+              width: '100%',
+              'max-width': '480px',
+            }}
+          />
         }
       />
     );

src/components/Navigation/Navigation.css

@@ -17,16 +17,13 @@
 }
 
 .link,
-.link:active,
 .link:visited {
   color: rgba(255, 255, 255, 0.8);
 }
 
+.active,
+.link:active,
 .link:hover {
   color: rgba(255, 255, 255, 1);
   border-color: #fff;
 }
-
-.active {
-  display: none;
-}

src/routes/accomodation/Accomodation.css

@@ -52,7 +52,3 @@
 .hotelLink:focus {
   color: rgba(255, 255, 255, 1);
 }
-
-.map {
-  width: 360px;
-}

src/routes/accomodation/Accomodation.js

@@ -55,14 +55,12 @@ class Accomodation extends React.Component {
                 <li key={index}><a className={s.hotelLink} href={hotel.url}>{hotel.title}</a></li>
               ))}
             </ul>
-            <div className={s.map}>
+            <Map
-              <Map
+              defaultZoom={12}
-                defaultZoom={12}
+              lat={offley[0].lat}
-                lat={offley[0].lat}
+              lng={offley[0].lng}
-                lng={offley[0].lng}
+              markers={hotels}
-                markers={hotels}
+            />
-              />
-            </div>
           </div>
         </div>
       </div>

src/routes/ceremony/Ceremony.css

@@ -46,7 +46,3 @@
   color: #fff;
   text-shadow: 1px 1px 4px var(--colour-nearblack);
 }
-
-.map {
-  width: 360px;
-}

src/routes/ceremony/Ceremony.js

@@ -30,14 +30,12 @@ class Ceremony extends React.Component {
             <p>The Church is located at the southern end of Kings Langley high street.
               Parking is available across the road at the Rose and Crown pub
               (Dan may be there before 1pm 😉).</p>
-            <div className={s.map}>
+            <Map
-              <Map
+              defaultZoom={14}
-                defaultZoom={14}
+              lat={markers[0].lat}
-                lat={markers[0].lat}
+              lng={markers[0].lng}
-                lng={markers[0].lng}
+              markers={markers}
-                markers={markers}
+            />
-              />
-            </div>
             <h3>About the church</h3>
             <p>All Saints Church is a medieval church with parts dating from the 13th century.
               The main features of the body of the Church are the beautiful reredos, depicting

src/routes/reception/Reception.css

@@ -46,7 +46,3 @@
   color: #fff;
   text-shadow: 1px 1px 4px var(--colour-nearblack);
 }
-
-.map {
-  width: 360px;
-}

src/routes/reception/Reception.js

@@ -33,14 +33,12 @@ class Reception extends React.Component {
               followed by music until late.</p>
             <h3>Where</h3>
             <p>The venue is approximately 30 minute drive from the Church.</p>
-            <div className={s.map}>
+            <Map
-              <Map
+              defaultZoom={12}
-                defaultZoom={12}
+              lat={offley[0].lat}
-                lat={offley[0].lat}
+              lng={offley[0].lng}
-                lng={offley[0].lng}
+              markers={offley}
-                markers={offley}
+            />
-              />
-            </div>
           </div>
         </div>
       </div>