#29 "mobile friendly"

src/components/collection/index.js

@@ -42,13 +42,13 @@ export default class Home extends React.Component {
     return (
       <div className="collection">
         <link rel="stylesheet" href="/src/css/collection.css" />
-        <div style={{float: 'left', width: '30%'}}>
+        <div className="left">
           <div className="card_img">
             <img src={API.base_image + this.card_img} />
           </div>
           <SearchForm handleContent={this.handleContent.bind(this)} />
         </div>
-        <div style={{float: 'right', width: '70%'}}>
+        <div className="right">
           {this.navigation()}<br />
           <CardList cards={this.content.slice(this.n * (this.p-1), this.n * this.p)} setImage={this.setImage.bind(this)}/>
           {this.navigation()}

src/css/collection.css

@@ -1,3 +1,15 @@
+@media only screen and (min-width: 975px) {
+
+.collection > .left {
+    float: left;
+    width: 30%;
+}
+
+.collection > .right {
+    float: right;
+    width: 70%;
+}
+
 .card {
     text-align: left;
     display: flex;
@@ -39,6 +51,26 @@
     padding-right: 4px;
 }
 
+.SearchForm {
+    text-align: left;
+}
+
+.brainwashed {
+    background-color: #dcdddf;
+    color: black !important;
+}
+
+.flavortext {
+    font-style: italic;
+}
+
+.disciplines input {
+    width: 30px;
+    height: 14px;
+}
+
+} /* desktop */
+
 .card .icon14, .card .icon16,
 .card .icon20, .card .icon24 {
     vertical-align: middle;
@@ -79,21 +111,3 @@
     width: 100px;
     height: 98px;
 }
-
-.SearchForm {
-    text-align: left;
-}
-
-.brainwashed {
-    background-color: #dcdddf;
-    color: black !important;
-}
-
-.flavortext {
-    font-style: italic;
-}
-
-.disciplines input {
-    width: 30px;
-    height: 14px;
-}

src/css/legacy.css

@@ -1,4 +1,5 @@
-/* Creatures */
+@media only screen and (min-width: 975px) {
+
 #player {
   width: calc(100% - 20px);
   margin: 0 10px;
@@ -761,3 +762,4 @@
   float:left; margin-left:-5px;
 }
 .adsBody-margin{margin:0 16px 0 14px;}
+}

src/css/packs.css

@@ -1,6 +1,11 @@
+@media only screen and (min-width: 975px) {
+.pack {
+    max-width: 70%;
+}
+} /* Desktop */
+
 .pack {
     height: 100%;
-    max-width: 70%;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;