fixing grid readjustment with expand and screens < 1150px

1 files changed, 7 insertions, 2 deletions

diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 633b16c05..be1388a83 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -37,8 +37,9 @@
   }
 
   /deep/ .video-js {
-    width: 888px;
-    height: 500px;
+    width: calc(100vw - 240px);
+    height: auto;
+    max-height: 500px;
 
     &.vjs-theater-enabled {
       height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
@@ -479,6 +480,10 @@
   }
 }
 
+@media (max-width: 1150px) {
+  .w-100-until-1150px { width: 100% !important }
+}
+
 @media screen and (max-width: 600px) {
   .video-bottom {
     margin: 20px 0 0 0;