Merge pull request #8 from richard-austin/stage_1.0.4_recording_displ…

…ay_features Media screen size awareness
richard-austin · Mar 9, 2021 · 4ab8688 · 4ab8688
2 parents c84bdf4 + 7b3b22e
commit 4ab8688
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/client/src/app/video/video.component.scss b/client/src/app/video/video.component.scss
@@ -10,7 +10,12 @@ div.videotitle {
 
 video.video
 {
-  width: 900px;
+  @media handheld and (max-device-width: 1000px), screen and (max-width: 1000px){
+    width: 700px;
+  }
+  @media handheld and (min-device-width: 1001px), screen and (min-width: 1001px) {
+    width: 900px;
+  }
   border: 0.25rem solid darkblue;
   border-right-color: #3939f3;
   border-bottom-color: #3939f3;
@@ -21,5 +26,5 @@ video.video
 // Smaller video size in multi display
 video.multi
 {
-    width: 700px;
+    max-width: 700px;
 }
diff --git a/client/src/index.html b/client/src/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>Client</title>
   <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1. shrink-to-fit=yes">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">