fix the html mobile view to have taller iframe

public/css/main.less

@@ -773,7 +773,7 @@ iframe.iphone {
     width: 100%;
     border-radius: 5px;
     overflow-y: visible;
-
+    height: 500px;
   }
 }
 
@@ -1092,7 +1092,6 @@ hr {
   .iframe-scroll {
     position: fixed !important;
     margin-top: 75px;
-    z-index: 9999;
   }
 }
 @media only screen and (max-width: 992px) {

views/coursewares/showHTML.jade

@@ -19,6 +19,7 @@ block content
     script(src='/js/lib/codemirror/mode/css/css.js')
     script(src='/js/lib/codemirror/mode/htmlmixed/htmlmixed.js')
     .row.courseware-height
+        .vertical-scroll
             .col-xs-12.col-sm-12.col-md-3.col-lg-3
                 .well
                     .row
@@ -80,6 +81,7 @@ block content
             .hidden-xs.hidden-sm
                 img.iphone-position.iframe-scroll(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png")
             iframe.iphone.iframe-scroll#preview
+            .spacer
         #complete-courseware-dialog.modal(tabindex='-1')
             .modal-dialog.animated.zoomIn.fast-animation
                 .modal-content