<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 class="sim-container"> <div class="profile-info row"> <img class="col-xs-4" src="http://lorempixel.com/420/420/sports"> <div class="col-xs-8"> <h4>[Name]</h4> <h4>[Type]</h4> </div> </div> <div class="profile-stats row"> <h5 class="col-xs-4">[X] Following</h5> <h5 class="col-xs-4">[X] Likes</h5> <h5 class="col-xs-4">[X] Votes</h5> </div> <div class="row"> <h4 class="col-xs-12">Activity:</h4> <div id="activityConnections" class="col-xs-12 connection-previews"> <div> <img src="http://lorempixel.com/420/420/city"> <div> <h6>[Company]</h6> <div> <span class="glyphicon glyphicon-minus"></span> <span class="glyphicon glyphicon-usd"></span> <span class="glyphicon glyphicon-arrow-right"></span> </div> </div> <img src="http://lorempixel.com/420/420/people"> <div> <h6>[Cause]</h6> <button class="btn btn-xs btn-success">Vote</button> </div> </div> <div> <img src="http://lorempixel.com/420/420/city"> <div> <h6>[Company]</h6> <div> <span class="glyphicon glyphicon-minus"></span> <span class="glyphicon glyphicon-usd"></span> <span class="glyphicon glyphicon-arrow-right"></span> </div> </div> <img src="http://lorempixel.com/420/420/people"> <div> <h6>[Cause]</h6> <button class="btn btn-xs btn-success">Vote</button> </div> </div> <div> <img src="http://lorempixel.com/420/420/city"> <div> <h6>[Company]</h6> <div> <span class="glyphicon glyphicon-minus"></span> <span class="glyphicon glyphicon-usd"></span> <span class="glyphicon glyphicon-arrow-right"></span> </div> </div> <img src="http://lorempixel.com/420/420/people"> <div> <h6>[Cause]</h6> <button class="btn btn-xs btn-success">Vote</button> </div> </div> <div> <img src="http://lorempixel.com/420/420/city"> <div> <h6>[Company]</h6> <div> <span class="glyphicon glyphicon-minus"></span> <span class="glyphicon glyphicon-usd"></span> <span class="glyphicon glyphicon-arrow-right"></span> </div> </div> <img src="http://lorempixel.com/420/420/people"> <div> <h6>[Cause]</h6> <button class="btn btn-xs btn-success">Vote</button> </div> </div> <div> <img src="http://lorempixel.com/420/420/city"> <div> <h6>[Company]</h6> <div> <span class="glyphicon glyphicon-minus"></span> <span class="glyphicon glyphicon-usd"></span> <span class="glyphicon glyphicon-arrow-right"></span> </div> </div> <img src="http://lorempixel.com/420/420/people"> <div> <h6>[Cause]</h6> <button class="btn btn-xs btn-success">Vote</button> </div> </div> <div> <img src="http://lorempixel.com/420/420/city"> <div> <h6>[Company]</h6> <div> <span class="glyphicon glyphicon-minus"></span> <span class="glyphicon glyphicon-usd"></span> <span class="glyphicon glyphicon-arrow-right"></span> </div> </div> <img src="http://lorempixel.com/420/420/people"> <div> <h6>[Cause]</h6> <button class="btn btn-xs btn-success">Vote</button> </div> </div> </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%; } .connection-previews > div:before, .connection-previews > div:after { content: ''; display: block; clear: both; } .connection-previews > div { margin-bottom: 5px; background: #fff; } .connection-previews > div > img { width: 18%; margin: 1%; float: left; } .connection-previews > div > div { padding: 5px 0; width: 30%; float: left; } .connection-previews > div > div > h6 { margin: 0; padding: 0 5px; height: 40%; } .connection-previews > div > div > div { margin: 10%; height: 40%; vertical-align: middle; } .connection-previews > div > div > button { margin: 10% 15% 10% 35%; width: 50%; height: 40%; } .profile-info > img { padding: 5px; } .profile-stats > h5 { text-align: center; }

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