Refactor displaychooser

src/components/DisplayChooser.js

 import React from 'react';
 import MediaContainer from "./MediaContainer";
-import '../style/DisplayChooserComponent.css';
+import '../style/DisplayChooser.css';
 
 export default class DisplayChooser extends React.Component {
 
@@ -15,9 +15,9 @@ export default class DisplayChooser extends React.Component {
     };
 
     render() {
-        const categoryNames = ["Category 1", "Category 2", "Category 3"];
+        const categoryNames = ["City", "Jungle", "Seaside"];
         return (
-            <div className="Display-chooser-component">
+            <div className="Display-chooser">
                 <MediaContainer checkedIndex={this.props.categorySelections.textCat} categoryNames={categoryNames}
                                 media="Text" handler={this}/>
                 <MediaContainer checkedIndex={this.props.categorySelections.imageCat} categoryNames={categoryNames}

src/components/DisplayChooserComponent.js

 import React from 'react';
 import MediaComponent from "./MediaComponent";
-import '../style/DisplayChooserComponent.css';
+import '../style/DisplayChooser.css';
 
 export default class DisplayChooserComponent extends React.Component {
 

src/style/DisplayChooserComponent.css → src/style/DisplayChooser.css

-.Display-chooser-component {
+.Display-chooser {
     display: inline-flex;
     flex-direction: column;
     font-family: sans-serif;
+}
+
+@media screen and (max-width: 480px){
+    .Display-chooser {
+        flex-direction: row;
+    }
 }
\ No newline at end of file