Fix mobile styling for landing page

Author: chromium7

frontend/src/components/Header/Header.js

@@ -80,7 +80,7 @@ export default function Header() {
                 <Space />
               </li>
               <li className="nav-item">
-                <NavButton text={"Learn more"} href={"/"} shadow={true} />
+                <NavButton text={"Edit pictures"} href={"/"} shadow={true} />
               </li>
             </ul>
           </div>

frontend/src/components/LandingPage/LandingBody.js

@@ -11,16 +11,17 @@ const ContainerBig = styled.div`
   border-bottom: 2px solid var(--color-secondary);
 
   img {
-    max-width: 80vw;
+    width: 100%;
   }
 
   .inside {
     display: flex;
+    flex-direction: column;
     justify-content: space-around;
     margin: 4em 0;
 
     div {
-      max-width: 40%;
+      margin-bottom: 2rem;
     }
 
     h4 {
@@ -32,19 +33,31 @@ const ContainerBig = styled.div`
       margin-bottom: 0.6rem;
     }
   }
+
+  @media only screen and (min-width: 992px) {
+    img {
+      max-width: 80%;
+    }
+
+    .inside {
+      flex-direction: row;
+
+      div {
+        max-width: 40%;
+        margin-bottom: 0;
+      }
+    }
+  }
 `;
 
 const ContainerMedium = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
   justify-content: space-around;
   padding: 3.2rem 0;
   border-bottom: 2px solid var(--color-secondary);
 
-  &.reverse {
-    flex-direction: column-reverse;
-  }
-
   h3 {
     font-family: var(--text-title);
   }
@@ -59,12 +72,11 @@ const ContainerMedium = styled.div`
   }
 
   img {
-    width: 40%;
+    width: 100%;
   }
 
-  img,
   div {
-    max-width: 40%;
+    max-width: 100%;
   }
 
   @media only screen and (min-width: 992px) {
@@ -73,12 +85,19 @@ const ContainerMedium = styled.div`
     &.reverse {
       flex-direction: row;
     }
+    img {
+      width: 40%;
+    }
+
+    div {
+      max-width: 40%;
+    }
   }
 `;
 
 export default function LandingBody() {
   return (
-    <div>
+    <main>
       <ContainerBig>
         <img src={placeholder} />
         <div class="inside">
@@ -118,7 +137,8 @@ export default function LandingBody() {
         </ContainerMedium>
       </SlideIn>
       <SlideIn>
-        <ContainerMedium>
+        <ContainerMedium className="reverse">
+          <img src={placeholder} />
           <div>
             <h3>Image manipulation using openCV</h3>
             <p>
@@ -129,7 +149,6 @@ export default function LandingBody() {
             </p>
             <a>Find out more &rarr;</a>
           </div>
-          <img src={placeholder} />
         </ContainerMedium>
       </SlideIn>
 
@@ -139,6 +158,6 @@ export default function LandingBody() {
         invert={true}
         href="/"
       />
-    </div>
+    </main>
   );
 }

frontend/src/components/LandingPage/LandingTitle.js

@@ -54,7 +54,7 @@ export default function LandingTitle() {
           No sign up required. Instantly add cool effects to your image by
           selecting from the available filters we provide at imapulator!
         </p>
-        <NavButton href={"/"} shadow={true} text={"Learn more"} />
+        <NavButton href={"/"} shadow={true} text={"Edit pictures now!"} />
       </Title>
     </Container>
   );

frontend/src/components/Shared/EndExplore.js

@@ -11,7 +11,7 @@ const Container = styled.div`
   padding: 4.8rem 0 6rem;
 
   div {
-    max-width: 60%;
+    width: 100%;
     text-align: center;
     animation: var(--animation-slide);
 
@@ -30,6 +30,12 @@ const Container = styled.div`
       margin-top: 2rem;
     }
   }
+
+  @media only screen and (min-width: 992px) {
+    div {
+      max-width: 60%;
+    }
+  }
 `;
 
 export default function EndExplore({ title, subtitle, href, invert }) {