Media queries everywhere to size iframe correctly

public/css/main.less

@@ -649,12 +649,19 @@ div.CodeMirror-scroll {
 }
 
 iframe.iphone {
+  border: none;
+  @media(min-width: 992px) {
     width: 280px;
     height: 500px;
     position: absolute;
     top: 70px;
     right: 25px;
-  border: none;
+  }
+  @media(max-width: 991px) {
+    width: 100%;
+    border-radius: 5px;
+    
+  }
 }
 
 // To adjust right margin, negative values bring the image closer to the edge of the screen

public/js/lib/coursewares/coursewaresFramework.js

@@ -30,7 +30,7 @@ var libraryIncludes = "<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3
 "<script src='//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js'></script>" +
 "<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/>" +
 "<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>" +
-"<style>body { padding: 0px 3px 0px 3px; }</style>"
+"<style>body { padding: 0px 3px 0px 3px; }</style>";
 
 var delay;
 // Initialize CodeMirror editor with a nice html5 canvas demo.

views/coursewares/show.jade

@@ -18,7 +18,7 @@ block content
     script(src='/js/lib/codemirror/mode/css/css.js')
     script(src='/js/lib/codemirror/mode/htmlmixed/htmlmixed.js')
     .row.courseware-height
-        .col-xs-12.col-sm-12.col-md-3
+        .col-xs-12.col-sm-12.col-md-3.col-lg-3
             .well
                 .row
                     .col-xs-12
@@ -52,17 +52,20 @@ block content
                 var challengeSeed = !{JSON.stringify(challengeSeed)};
                 var passedCoursewareHash = !{JSON.stringify(coursewareHash)};
                 var bonfireName = 'Testing Courseware';
-        .col-xs-12.col-sm-12.col-md-6
+        .col-xs-12.col-sm-12.col-md-5.col-lg-6
             #mainEditorPanel
                 form.code
                     .form-group.codeMirrorView
                         textarea#codeEditor(autofocus=true)
                 script(src='/js/lib/coursewares/coursewaresFramework.js')
                     #complete-bonfire-dialog.modal(tabindex='-1')
-        .col-xs-12.col-sm-12.col-md-3
+        .col-md-4.col-lg-3
+            .hidden-xs.hidden-sm
                 img.iphone-position(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png")
             iframe.iphone#preview
-
+    //
+        .visible-xs-block.visible-sm-block.text-center
+            iframe.no-phone#preview
     //
         //.modal-dialog.animated.zoomIn.fast-animation
         //    .modal-content