diff --git a/website/src/components/DocsSidebar.css b/website/src/components/DocsSidebar.css
index 7aa81d19..7166c6bb 100644
--- a/website/src/components/DocsSidebar.css
+++ b/website/src/components/DocsSidebar.css
@@ -25,7 +25,7 @@
   margin-bottom: 5px;
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (max-width: 992px) {
   .DocsSidebar {
     width: 100%;
     padding: 20px;
diff --git a/website/src/components/Toolbar.js b/website/src/components/Toolbar.js
index f46ce586..501b1a9c 100644
--- a/website/src/components/Toolbar.js
+++ b/website/src/components/Toolbar.js
@@ -34,7 +34,7 @@ export default class Toolbar extends Component<Props> {
         <Link to="/docs" activeClassName="selected">Documentation</Link>
 
         <Row>
-          <Col xl={24} lg={0} md={0} sm={0} xs={0}>
+          <Col lg={24} md={0} sm={0} xs={0}>
             <Link to="/playground" activeClassName="selected">Playground</Link>
           </Col>
         </Row>
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 1061eef1..eeb92d78 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -57,7 +57,7 @@ const HeroSection = () => (
 
 const PlaygroundSection = () => (
   <Row>
-    <Col xl={24} lg={0} md={0} sm={0} xs={0}>
+    <Col lg={24} md={0} sm={0} xs={0}>
       <Playground selectedNodePath={[]} showGuides={false} height={601} />
     </Col>
   </Row>
diff --git a/website/src/pages/playground/index.css b/website/src/pages/playground/index.css
index 8914b2bc..138ca648 100644
--- a/website/src/pages/playground/index.css
+++ b/website/src/pages/playground/index.css
@@ -1,16 +1,16 @@
-.playground {
+.playground-page {
   display: flex;
   flex: 1;
 }
 
-.playground .error-container {
+.playground-page .error-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-.playground .error-text {
+.playground-page .error-text {
   color: #444950;
   line-height: 180%;
   font-size: 16px;
diff --git a/website/src/pages/playground/index.js b/website/src/pages/playground/index.js
index 38a184cf..11823166 100644
--- a/website/src/pages/playground/index.js
+++ b/website/src/pages/playground/index.js
@@ -18,12 +18,12 @@ import './index.css';
 
 export default () => (
   <Page>
-	<Row className="playground">
-	  <Col xl={24} lg={0} md={0} sm={0} xs={0}>
+	<Row className="playground-page">
+      <Col lg={24} md={0} sm={0} xs={0}>
 	    <Playground height="100%" selectedNodePath={[]} persist />
 	  </Col>
 
-  	  <Col xl={0} xs={24} className="error-container">
+  	  <Col lg={0} xs={24} className="error-container">
 	    <p className="error-text">Sorry! The playground only works on larger displays currently.</p>
 	  </Col>
 	</Row>
diff --git a/website/src/templates/index.css b/website/src/templates/index.css
index 958ad617..63b49c90 100644
--- a/website/src/templates/index.css
+++ b/website/src/templates/index.css
@@ -80,7 +80,7 @@
   padding-right: 3px;
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (max-width: 992px) {
   .playground .Playground {
     display: none;
   }