pro2/src/App.css

@@ -17,4 +17,16 @@
 
 h1 {
     font-size: 4vh;
+}
+
+@media only screen and (max-width: 1000px) {
+
+    .grid-container {
+        margin: 5%;
+        display: grid;
+        grid-template-areas:
+                'art art art art'
+                'category category category category';
+        grid-gap: 3%;
+    }
 }
\ No newline at end of file

pro2/src/App.js

@@ -165,7 +165,7 @@ class App extends React.Component {
                     </Tabs>
                 </div>
                 <MediaTypes mediaTypes={this.state.mediaTypes} className={"categoryPicker"}/>
-                <input type="button" value="Save Changes" onClick={this.handleClick}/>
+                <input className={"saveButton"} type="button" value="Save Changes" onClick={this.handleClick}/>
             </div>
             );
 

pro2/src/components/ArtView.js

@@ -25,20 +25,29 @@ class ArtView extends React.Component {
                     console.log(result);
                 }
             ).catch(error => console.log(error));
+
+        fetch(`./data/sound/scifi1.mp3`)
+            .then(res => res.text())
+            .then(
+                result => {
+                    this.setState({image: result});
+                    console.log(result);
+                }
+            ).catch(error => console.log(error));
     }
-    render() {
 
+    render() {
         return (
             <div className="artContainer">
                 <div id="image">
-                    {this.state.image}
+                    Hey there! I was going to write this.state.image, but that's just the svg code as a string. Due to time constraints, this was not implemented.
                 </div>
                 <div id="text">
                     {this.state.text}
                 </div>
                 <div id="sound">
                     <audio controls>
-                        <source src={this.state.image} type={"audio/mpeg"}/>
+                        <source src={this.state.sound} type={"audio/mpeg"}/>
                     </audio>
                 </div>
             </div>

pro2/src/components/componentStyles/MediaTypesStyle.css

@@ -14,4 +14,18 @@ ul {
 
 .media-type-name {
     font-size: 3vh;
+}
+
+@media only screen and (max-width: 1000px) {
+    ul {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+}
+
+@media only screen and (max-width: 670px) {
+    ul {
+        width: 100%;
+    }
 }
\ No newline at end of file