diff --git a/playground/index.html b/playground/index.html
index 4a164011f..9b525f72a 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -122,21 +122,21 @@ <h2>JSON-LD Playground</h2>
         
         <br/><br/>
 
-        <div id="markup-container" class="">
+        <div id="markup-container">
           <div class="row">
-            <div id="markup-div" class="span4">
+            <div id="markup-div" class="span6">
               <h3>JSON-LD Input</h3>
-              <textarea id="markup" class="compressed process span4"
+              <textarea id="markup" class="compressed process span6"
               placeholder="Enter your JSON-LD markup here..." rows="10"></textarea>
             </div>
-            <div id="context-div" class="span4">
+            <div id="context-div" class="span6">
               <h3>JSON-LD Context</h3>
-              <textarea id="context" class="compressed process span4"
+              <textarea id="context" class="compressed process span6"
               placeholder="Enter your JSON-LD context here..." rows="10"></textarea>
             </div>
-            <div id='frame-div' class="span4">
+            <div id="frame-div" class="span6">
               <h3>JSON-LD Frame</h3>
-              <textarea id="frame" class="compressed process span4"
+              <textarea id="frame" class="compressed process span6"
               placeholder="Enter your JSON-LD frame here..." rows="10"></textarea>
             </div>
           </div>
@@ -203,6 +203,7 @@ <h3>JSON-LD Frame</h3>
       <!-- script tags -->
       <script type="text/javascript" src="../static/js/bootstrap/bootstrap.js"></script> 
       <script type="text/javascript">
+        $('#frame-div').hide();
         $('#markup,#context,#frame').bind('keyup', function() { 
           $('.btn-group > .btn').each(function () {
             $(this).removeClass('active')
diff --git a/playground/playground.js b/playground/playground.js
index c38f22dde..b809c26f2 100644
--- a/playground/playground.js
+++ b/playground/playground.js
@@ -162,6 +162,8 @@
       ui.tab.id === 'tab-framed') {
       // these options require more UI inputs, so compress UI space
      $('#markup').addClass('compressed');
+     $('#markup').removeClass('span12');
+     $('#markup').addClass('span6');
 
       if(ui.tab.id === 'tab-compacted' || ui.tab.id === 'tab-flattened') {
         $('#param-type').html('JSON-LD Context');
@@ -179,6 +181,8 @@
       $('#context-div').hide();
       $('#frame-div').hide();
       $('#markup-div').removeClass('compressed');
+      $('#markup').removeClass('span6');
+      $('#markup').addClass('span12');
       $('#param-type').html('');
     }