Make design responsive

2 files changed, 23 insertions, 0 deletions

diff --git a/src/App.css b/src/App.css
index 986f62e..5d32cc6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -13,6 +13,17 @@
   margin-left: 220px;
 }
 
+@media only screen and (max-width: 768px) {
+  .left {
+    width: 100%;
+    float: none
+  }
+
+  .right {
+    margin-left: 0;
+  }
+}
+
 .clear {
   clear: both;
 }
diff --git a/src/SearchResults.css b/src/SearchResults.css
index 194c731..ae05e10 100644
--- a/src/SearchResults.css
+++ b/src/SearchResults.css
@@ -52,3 +52,15 @@
 .label {
   font-weight: bold;
 }
+
+@media only screen and (max-width: 768px) {
+  .Result .image {
+    float: none;
+    width: 100%;
+  }
+
+  .Result .details, .Result h3 {
+    margin-left: 0;
+  }
+}
+