Make wallet view visible iff vw above 575px

4 files changed, 25 insertions, 5 deletions

diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 091a5cd7c..97c881483 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -33,7 +33,7 @@ WalletView.prototype.render = function () {
   const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684'
   const { network } = this.props
 
-  return h('div.wallet-view.flex-column', {
+  return h('div.wallet-view.flex-column.lap-visible', {
     style: {
       // width: '33.333%',
       flexGrow: 1,
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 3c397dcff..b027792fb 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -718,5 +718,27 @@ div.message-container > div:first-child {
 }
 
 .pop-hover:hover {
-    transform: scale(1.1);
+  transform: scale(1.1);
+}
+
+@media screen and (min-width: 576px) {
+  .lap-visible {
+    display: none;
+  }
+
+  .phone-visible {
+    display: flex;
+  }
+
+}
+
+@media screen and (max-width: 575px) {
+  .lap-visible {
+    display: flex;
+  }
+
+  .phone-visible {
+    display: none;
+  }
+
 }
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 98570859a..b0ca958a2 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -270,4 +270,3 @@ hr.horizontal-line {
   margin-top: 20px;
   color: red;
 }
-
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index ae62a0e0c..592f331b5 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -27,10 +27,9 @@ MainContainer.prototype.render = function () {
       overflowY: 'scroll',
     }
   }, [
+
     h(WalletView, {
       style: {
-        // width: '33.33%',
-        // height: '82vh',
       }
     }, [
     ]),