add mobile map

frontend/src/Components/App/App.js

@@ -7,10 +7,13 @@ import Intro from '../Intro';
 import Description from '../Description';
 import Features from '../Fatures';
 import TryIt from '../TryIt';
+import MobileMap from '../MobileMap';
 import Map from '../Map';
 import Development from '../Development/Development';
 import Footer from '../Footer/Footer';
 
+import martin from './small_martin.gif';
+
 const App = () => (
   <ParallaxProvider>
     <GlobalStyle />
@@ -29,6 +32,7 @@ const App = () => (
         days of the week, and hours and to sum or average the numbers by areas.
       </p>
     </TryIt>
+    <MobileMap src={martin} alt='map example' />
     <Map />
     <Development />
     <Footer />

frontend/src/Components/Description.js

@@ -15,7 +15,7 @@ export default styled.div`
 
   @media (max-width: 500px) {
     height: 30vh;
-    margin-bottom: 10px;
+    margin-bottom: 150px;
 
     font-size: 30px;
   }

frontend/src/Components/Development/Container.js

@@ -8,6 +8,6 @@ export default styled.div`
   font-size: 30px;
   
   @media (max-width: 500px) {
-    padding: 7vw;
+    padding: 7vw 7vw 50px;
   }
 `;

frontend/src/Components/Development/Title.js

@@ -2,4 +2,8 @@ import styled from 'styled-components';
 
 export default styled.div`
   margin-bottom: 50px;
+  
+  @media (max-width: 500px) {
+    margin-bottom: 20px;
+  }
 `;

frontend/src/Components/MobileMap.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export default styled.img`
+  margin-top: -120px;
+  margin-bottom: 50px;
+`;