Fix watch page responsive

2 files changed, 5 insertions, 2 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index c380fe5bf..fd0d5e458 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -307,7 +307,7 @@ table {
   font-weight: $font-semibold;
 }
 
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 1200px) {
   .main-col {
     &.expanded {
       .margin-content {
@@ -337,7 +337,7 @@ table {
   }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: $small-view) {
   .main-col {
     margin-left: 0;
 
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 792a3f9c2..fb253fc1f 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,3 +1,6 @@
+$small-view: 800px;
+$mobile-view: 500px;
+
 $main-fonts: 'Source Sans Pro', sans-serif;
 $font-regular: 400;
 $font-semibold: 600;