Use min-width for mobile breakpoint

lucka-me · Dec 21, 2020 · a10f542 · a10f542
1 parent 55b8371
commit a10f542
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/ui/dashboard/style.scss b/src/ui/dashboard/style.scss
@@ -13,17 +13,21 @@
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
 
-    @media screen and (max-width: 620px) {
+    @media not all and (min-width: 620px) {
         flex-flow: column nowrap;
         align-items: stretch;
+
+        &.view-hide {
+            display: none;
+        }
     }
 
     > .mdc-card {
         height: 200px;
         margin: 4px;
         flex-basis: 0%;
 
-        @media screen and (max-width: 620px) {
+        @media not all and (min-width: 620px) {
             margin: 4px 8px;
             min-width: 0;
             min-height: 200px;

diff --git a/src/ui/nomination-list/style.scss b/src/ui/nomination-list/style.scss
@@ -9,4 +9,10 @@
     overflow-y: auto;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
+
+    @media not all and (min-width: 620px) {
+        &.view-hide {
+            display: none;
+        }
+    }
 }
diff --git a/src/ui/style.scss b/src/ui/style.scss
@@ -67,9 +67,4 @@ a { color: var(--mdc-theme-text-primary-on-light); }
     flex: 1;
     display: flex;
     flex-flow: row nowrap;
-}
-
-/* Mobile View */
-@media screen and (max-width: 620px) {
-    .view-hide { display: none !important; }
 }