Added responsive playground

Author: prasanna1211

docs/client/components/PlaygroundPage/PlaygroundWithPreview/editor.css

@@ -30,6 +30,9 @@ class PlaygroundWithPreview extends React.Component {
         <div className="header">
           Playground
         </div>
+        <div className="warning"> 
+          (Editor not available at this screen size) 
+        </div>
         <LiveProvider 
           scope={{ ...components, theme }}
           code={this.props.defaultCode}

docs/client/components/PlaygroundPage/PlaygroundWithPreview/index.js

@@ -2,22 +2,64 @@
   .prism-code {
     white-space: pre-wrap !important;
   }
-  .code-editor {
-    width: 50%;
-    float: left;
+  .header {
+    font-size: 1.5rem;
+    font-weight: bold;
   }
-
-  .code-preview {
-    width: 45%;
-    float: left;
-    margin-left: 15px;
-    .error {
-      color: red;  
+  @media (min-width: 800px) {
+    .header {
+      margin-left: 5px;
+    }
+    .warning {
+      display: none;
+    }
+    .code-editor {
+      width: 50%;
+      float: left;
+    }
+  
+    .code-preview {
+      width: 45%;
+      float: left;
+      margin-left: 15px;
+      .error {
+        color: red;  
+      }
+    }
+    
+    .doc-enabler {
+      text-align: center;
+      margin-top: 40px;
     }
   }
+
+  @media (max-width: 800px) {
+    .header {
+      margin: 10px auto;
+      width: 80%;
+    }
+    .warning {
+      margin: 10px auto;
+      width: 80%;
+      font-size: 1.2rem;
+      color: red;
+    }
+    .code-editor {
+      display: none;
+    }
 
-  .doc-enabler {
-    text-align: center;
-    margin-top: 40px;
+    .code-preview {
+      width: 90%;
+      margin: 15px;
+      margin-right: 15px;
+      .error {
+        color: red;  
+      }
+    }
+    
+    .doc-enabler {
+      display: none;
+    }
   }
+  
 }

docs/client/components/PlaygroundPage/PlaygroundWithPreview/styles.scss

@@ -2,7 +2,6 @@
   background: #FFFFFF;
   border-radius: 3px;
   padding: 10px;
-  min-width: 300px;
   margin: 5px;
 }