Mobile responsiveness

frontend/src/Components/LandingPage.tsx

@@ -45,12 +45,14 @@ class LandingPage extends React.Component<props, state> {
                     <p>Favorites</p>
                     <ul>{this.state.favorites}</ul>
                 </div>
+                <div className={'flex2'}>
                 <div className={'navbutton left'}>
                     <NavButton direction={"left"}/>
                 </div>
                 <div className={'navbutton right'}>
                     <NavButton direction={"right"}/>
                 </div>
+                </div>
             </div>
         );
     }

frontend/src/SVGs.tsx

 import React from "react";
 
 export default [ // Collection of Artworks that will be displayed
-  <svg viewBox={"0 0 200 80"}>
+  <svg>
     <rect width={"200"} height={80} fill={"blue"} />
   </svg>,
   <svg viewBox={"0 0 200 80"}>

frontend/src/Style/LandingPage.css

@@ -15,9 +15,9 @@
     font-family: Arial, Helvetica, sans-serif; 
 }
 
-.welcome-svg { 
+.welcome-svg {
     grid-area: welcomesvg;
-    place-self: center; 
+    place-self: center;
 }
 
 .favorites {
@@ -43,9 +43,82 @@
 }
 
 .navbutton.right {
-    grid-area: right;
-    place-self: center;
-    position: fixed;
-    top: 50%;
-    right: 5%;   
+    grid-area: navbutton-right;
+}
+
+.flex2 {
+
+}
+
+@media (orientation: portrait){
+    .title {
+        font-size: xx-large;
+    }
+
+    .landing-page {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .favorites {
+        font-size: large;
+        padding: 0;
+    }
+
+    .welcome-p {
+        margin: 0px;
+        margin-bottom: 10px;
+        font-size: large;
+    }
+
+    .navbutton.right {
+    }
+
+    .navbutton.left {
+    }
+
+    .flex2 {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
+}
+/**
+@media (orientation: portrait){
+    .title {
+        font-size: xx-large;
+    }
+
+    .landing-page {
+        grid-template-columns: 1fr;
+        grid-template-rows: 0.5fr 1fr 1fr 1fr;
+        grid-template-areas:
+    ". Title ."
+    ". welcome-svg ."
+    ". welcome-p ."
+    ". navbuttons .";
+        justify-content: start;
+    }
+
+    .favorites {
+        padding-top: 10rem;
+        font-size: large;
+    }
+
+    .welcome-p {
+        margin: 0px;
+        margin-bottom: 10px;
+        font-size: large;
+    }
+
+    .navbutton.right {
+        grid-area: navbuttons;
+        place-self: center;
+    }
+
+    .navbutton.left {
+        grid-area: navbuttons;
+    }
 }
+**/
\ No newline at end of file

frontend/src/Style/MainPage.css

@@ -4,4 +4,26 @@
 
 .header {
     background-color: grey;
+}
+
+.navbutton {
+    grid-row: 3 / 4;
+    display: flex;
+}
+
+.navbutton.left {
+    grid-column: 1 / 2;
+    flex-direction: row-reverse;
+    margin-right: 10rem;
+}
+.navbutton.right {
+    grid-column: 3 / 4;
+    margin-left: 10rem;
+}
+
+.navbutton button {
+    font-size: large;
+    width: 5rem;
+    height: 2rem;
+    margin-bottom: 3rem;
 }
\ No newline at end of file