[#84] Responsive Modal (fixed)

skwirowski · Jan 18, 2021 · a4e5dc9 · a4e5dc9
1 parent bc4e477
commit a4e5dc9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/src/app/App.js b/src/app/App.js
@@ -28,8 +28,7 @@ const testDataHuman = [
     correct: 'Test',
     isCorrect: true,
     img: '../../static/assets/img/modes/people/10.jpg',
-  },
-
+  },  
 ];
 
 const testDataComputer = [

diff --git a/styles/components/modalGameOver.scss b/styles/components/modalGameOver.scss
@@ -180,13 +180,38 @@
   }
 }
 
-@media screen and (max-width:720px){
+@media screen and (max-width:720px) and (max-height:745px) and (min-height:591px){
   .swquiz-modal{
     font-size: 3.5vw;
     &--table{
       tbody{
-        max-height: 25vh;
+        max-height: 15vh;
       }
     }
   }
 }
+
+@media screen and (max-height:590px){
+  .swquiz-modal{
+    font-size: 3vh;
+    &--table{
+      tbody{
+        max-height: 15vh;
+      }
+    }
+    &--nameInput{
+      text-align: center;
+      width:70%;
+      justify-self: center;
+      height: 3vw;
+    }
+    &--photoContainer{
+      display: none;
+    }
+    &--middleContainer{
+      grid-template-columns: 1fr;
+      max-height: 40%;
+    }
+
+  }
+}