feat(shop): improve responsive design

SteveVanOpstal · Jan 12, 2017 · a21ba6a · a21ba6a
1 parent 84dd207
commit a21ba6a
Showing 1 changed file with 24 additions and 18 deletions.
diff --git a/src/client/build/build.css b/src/client/build/build.css
@@ -505,6 +505,7 @@ lb-shop .items {
 }
 
 lb-shop .items lb-item {
+  overflow: hidden;
   width: 32%;
 }
 
@@ -515,7 +516,7 @@ lb-shop .items lb-item > div {
 }
 
 lb-shop .items lb-item > div > p {
-  display: inline;
+  display: inline-block;
   font-family: sans-serif;
   font-size: 1em;
   margin: 0;
@@ -580,7 +581,7 @@ lb-item > img {
 }
 
 lb-item .name {
-  width: 100%;
+  width: 200%;
 }
 
 lb-item .gold {
@@ -597,7 +598,7 @@ lb-item .gold img {
 }
 
 lb-item .gold p {
-  margin: 2px -8px;
+  margin: 0 -8px;
 }
 
 lb-item:hover {
@@ -665,11 +666,10 @@ lb-preview .tree {
 lb-preview lb-item {
   display: inline-block;
   position: relative;
-  width: 45px;
 }
 
 lb-preview lb-item p.gold {
-  margin-top: -19px;
+  margin-top: -21px;
 }
 
 lb-preview .item > lb-item,
@@ -781,7 +781,7 @@ lb-items-from > div:first-of-type:last-of-type > lb-item:before {
   }
 }
 
-@media (max-width: 1350px) {
+@media (max-width: 1200px) {
   .title {
     height: 60px;
     margin-top: -60px;
@@ -798,22 +798,28 @@ lb-items-from > div:first-of-type:last-of-type > lb-item:before {
   }
 }
 
-@media (max-width: 800px) {
-  lb-shop .left {
-    display: none;
+@media (max-width: 950px) {
+  lb-shop .middle {
+    min-width: 60%;
+  }
+
+  lb-shop .right {
+    min-width: 40%;
   }
-}
 
-@media (max-width: 600px) {
   lb-shop .items lb-item {
-    width: 100%;
+    width: 96%;
   }
-  lb-shop .items lb-item .gold {
-    display: inline-block;
-    text-align: right;
+}
+
+@media (max-width: 700px) {
+  lb-shop .left {
+    display: none;
   }
-  lb-shop .items p {
-    font-size: 1.2em;
-    line-height: 45px;
+}
+
+@media (max-width: 500px) {
+  lb-shop .items lb-item > div > p {
+    font-size: .9em;
   }
 }