<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <input id="width" type="text" value="320"> <input id="height" type="text" value="548"> <button id="resize">Resize</button> <div class="wrapper" style="width: 320px; height: 548px;"> <div class="phone-body"> <div class="phone-area"> <!-- Your code here --> <div class="body"> <div style="min-height: 40px; background: #8e44ad;"> </div> <div role="tabpanel"> <ul class="nav nav-sections" role="tablist"> <li class="active"><a href="#recentBusinesses" aria-controls="recent" role="tab" data-toggle="tab">Recent</a></li> <li><a href="#nearbyBusinesses" aria-controls="nearbyBusinesses" role="tab" data-toggle="tab">Nearby</a></li> <li><a href="#businessCategories" aria-controls="businessCategories" role="tab" data-toggle="tab">Categories</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="recentBusinesses"> <table class="entry-list"> <tbody> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td> <h6>[Name]</h6> <h6>[Type]</h6> <h6>Suggested</h6> </td> <td><h5>[X] mi</h5></td> <td><button class="btn btn-primary">Select</button></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td> <h6>[Name]</h6> <h6>[Type]</h6> <h6>Suggested</h6> </td> <td><h5>[X] mi</h5></td> <td><button class="btn btn-primary">Select</button></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td> <h6>[Name]</h6> <h6>[Type]</h6> <h6>Suggested</h6> </td> <td><h5>[X] mi</h5></td> <td><button class="btn btn-primary">Select</button></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td> <h6>[Name]</h6> <h6>[Type]</h6> <h6>Suggested</h6> </td> <td><h5>[X] mi</h5></td> <td><button class="btn btn-primary">Select</button></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td> <h6>[Name]</h6> <h6>[Type]</h6> <h6>Suggested</h6> </td> <td><h5>[X] mi</h5></td> <td><button class="btn btn-primary">Select</button></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td> <h6>[Name]</h6> <h6>[Type]</h6> <h6>Suggested</h6> </td> <td><h5>[X] mi</h5></td> <td><button class="btn btn-primary">Select</button></td> </tr> </tbody> </table> </div> <div role="tabpanel" class="tab-pane" id="nearbyBusinesses"> <table class="entry-list"> <tbody> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td> <h6>[Name]</h6> <h6>[Type]</h6> <h6>Suggested</h6> </td> <td><h5>[X] mi</h5></td> <td><button class="btn btn-primary">Select</button></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td> <h6>[Name]</h6> <h6>[Type]</h6> <h6>Suggested</h6> </td> <td><h5>[X] mi</h5></td> <td><button class="btn btn-primary">Select</button></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td> <h6>[Name]</h6> <h6>[Type]</h6> <h6>Suggested</h6> </td> <td><h5>[X] mi</h5></td> <td><button class="btn btn-primary">Select</button></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td> <h6>[Name]</h6> <h6>[Type]</h6> <h6>Suggested</h6> </td> <td><h5>[X] mi</h5></td> <td><button class="btn btn-primary">Select</button></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td> <h6>[Name]</h6> <h6>[Type]</h6> <h6>Suggested</h6> </td> <td><h5>[X] mi</h5></td> <td><button class="btn btn-primary">Select</button></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td> <h6>[Name]</h6> <h6>[Type]</h6> <h6>Suggested</h6> </td> <td><h5>[X] mi</h5></td> <td><button class="btn btn-primary">Select</button></td> </tr> </tbody> </table> </div> <div role="tabpanel" class="tab-pane" id="businessCategories"> <table class="category-list"> <tbody> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td><h4>[Category]</h4></td> <td><h4>[X]</h4></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td><h4>[Category]</h4></td> <td><h4>[X]</h4></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td><h4>[Category]</h4></td> <td><h4>[X]</h4></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td><h4>[Category]</h4></td> <td><h4>[X]</h4></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td><h4>[Category]</h4></td> <td><h4>[X]</h4></td> </tr> <tr> <td><img src="http://lorempixel.com/420/420/city"></td> <td><h4>[Category]</h4></td> <td><h4>[X]</h4></td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- End code --> </div> </div> </div>

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700); @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700); body { padding: 10px; background: #aaa; } .wrapper { position: absolute; top: 40px; left: 40%; } .phone-body { border: 10px solid black; border-radius: 10px; width: calc(100% + 20px); height: calc(100% + 20px); } .phone-area { width: 100%; height: 100%; background: #edf0f1; overflow-y: auto; overflow-x: hidden; } .sim-container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .body { font-family: 'Roboto Condensed', 'sans-serif'; background: #edf0f1; width: 100%; } .nav-sections > li { float: left; border-right: 1px solid #95A5A6; text-align: center; font-weight: bold; width: 33.3333333%; } .nav-sections > li:last-of-type { border-right-width: 0; } .nav-sections > li > a { padding: 15px; border-bottom: 1px solid #95A5A6; } .nav-sections > li.active > a { border-bottom-width: 5px; padding-bottom: 11px; transition: all .25s; } .nav-sections a { color: #000; } .entry-list { border-spacing: 0 5px; border-collapse: separate; margin: -5px 10px; } .entry-list tr { background: #fff; } .entry-list tr > td:nth-of-type(1) { width: 20%; } .entry-list tr > td > img { width: 90%; margin: 5%; } .entry-list tr > td:nth-of-type(2) { width: 26.6666666%; } .entry-list tr > td > h6 { margin: 5px 0; } .entry-list tr > td:nth-of-type(3) { width: 20%; text-align: right; } .entry-list tr > td > button { margin-right: 10%; float: right; } .category-list { border-spacing: 0 5px; border-collapse: separate; margin: -5px 10px; } .category-list tr { background: #fff; } .category-list tr > td:nth-of-type(1) { width: 20%; } .category-list tr > td > img { width: 90%; margin: 5%; } .category-list tr > td:nth-of-type(2) { width: 60%; padding-left: 10px; } .category-list tr > td:nth-of-type(3) { width: 20%; } .category-list tr > td:nth-of-type(3) > h4 { float: right; padding: 5px 10px; min-height: 25px; border-radius: 25px; font-size: 18; font-weight: 700; line-height: 1; vertical-align: baseline; margin-right: 10px; background: #555; color: #FFF; }

$(function() { $('#resize').click(function() { var width = $('#width').val(); var height = $('#height').val(); var style = 'width: ' + width + 'px; height: ' + height + 'px;'; $('.wrapper').attr('style', style); }); });