diff --git a/src/App/index.scss b/src/App/index.scss
index bc35a28..ae1529d 100644
--- a/src/App/index.scss
+++ b/src/App/index.scss
@@ -10,6 +10,10 @@
 .playground {
   width: 1328px;
 
+  @media (max-width: 1328px) {
+    width: 100%
+  }
+
   margin-top: 30px;
 }
 
diff --git a/src/SplitViewEditor/index.scss b/src/SplitViewEditor/index.scss
index fed6fc4..445b060 100644
--- a/src/SplitViewEditor/index.scss
+++ b/src/SplitViewEditor/index.scss
@@ -2,15 +2,19 @@
   display: flex;
 
   gap: 30px;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+  }
 }
 
 .area__card {
   padding: var(--g-text-body-1-font-size);
 
   & > section {
-    height: var(--diplodoc-playground-height) !important;
-    min-height: var(--diplodoc-playground-height) !important;
-    max-height: var(--diplodoc-playground-height) !important;
+    height: var(--diplodoc-playground-height);
+    min-height: var(--diplodoc-playground-height);
+    max-height: var(--diplodoc-playground-height);
 
     overflow-y: scroll;
     overflow-x: hidden;
@@ -21,7 +25,7 @@
 
 /* yfm preview */
 .area__yfm {
-  border-radius: 2px !important;
+  border-radius: 2px;
 
   height: calc(var(--diplodoc-playground-height) + 26px);
   min-height: calc(var(--diplodoc-playground-height) + 26px);
@@ -32,7 +36,7 @@
 }
 
 .area-card__editor {
-  border-radius: 2px !important;
+  border-radius: 2px;
   padding-right: 0px;
 }
 
@@ -43,9 +47,17 @@
 .input {
   width: 50%;
 
+  @media (max-width: 600px) {
+    width: 100%;
+  }
+
   margin-top: 39px;
 }
 
 .output {
   width: 50%;
+
+  @media (max-width: 600px) {
+    width: 100%;
+  }
 }
diff --git a/src/overrides.scss b/src/overrides.scss
index 450d7ca..780e67e 100644
--- a/src/overrides.scss
+++ b/src/overrides.scss
@@ -4,7 +4,15 @@
   }
 
   .pc-editor-layout__left, .pc-editor-layout__right {
-    height: calc(100vh - 300px);
-    max-height: calc(100vh - 300px);
+    height: calc(100vh - 230px);
+    max-height: calc(100vh - 230px);
+  }
+
+  .pc-device-emulation-mobile__frame_device_tablet {
+    height: 100%;
+  }
+
+  .pc-device-emulation-mobile__frame_device_mobile {
+    height: 100%;
   }
 }
diff --git a/src/styles.css b/src/styles.css
index 148f774..a2f00da 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,14 +1,14 @@
 .g-root {
   /*--g-card-background-color: rgb(198, 255, 62);*/
   /*--g-color-line-brand: rgb(26, 62, 48) !important;*/
-  --diplodoc-playground-height: 300px;
+  --diplodoc-playground-height: 400px;
 
   @media (min-width: 768px) {
-    --diplodoc-playground-height: 600px;
+    --diplodoc-playground-height: calc(100vh - 230px);
   }
 
   @media (min-width: 1080px) {
-    --diplodoc-playground-height: 900px;
+    --diplodoc-playground-height: calc(100vh - 300px);
   }
 }