Play state

src/meta/play-meta.js

@@ -1,4 +1,3 @@
-
 import {
   BasicTree, CdTimerComp,
   CurrentTimer,
@@ -130,4 +129,3 @@ export const plays = [
 ];
 
 
-

src/plays/states/States.jsx

@@ -82,9 +82,9 @@ function States(props) {
 
               <div className="play-area-result">
                 {!display ? (
-                  <p style={{marginLeft: '2rem'}}>Enter Details of the Message</p>
+                  <p >Enter Details of the Message</p>
                 ) : (
-                  <h3 style={{marginLeft: '2rem'}}>Welcome to State Play, {name} </h3>
+                  <h3 >Welcome to State Play, {name} </h3>
                 )}
               </div>
             </div>

src/plays/states/states.css

@@ -4,6 +4,10 @@
   flex-direction: column;
 }
 
+.play-area-result {
+  margin-left: 2rem;
+}
+
 .play-area {
   border-right-width: 0.1rem;
   border-right-style: solid;
@@ -26,12 +30,28 @@
 .submit-button {
   height: 2rem;
   width: 6rem;
-  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 1rem;
   background: rgb(108, 226, 252);
   border: none;
   outline: none;
   margin-top: 1.2rem;
   margin-left: 4rem;
   border-radius: 1rem;
+}
+
+@media only screen and (max-width: 760px)  {
+  .play-area-container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 3rem;
+  }
+
+  .play-area {
+    border: none;
+  }
+
+  .play-area-result {
+    margin-left: 0.5rem;
+    margin-top: 1.5rem;
+  }
 }