Bootstrap screen demo needs to be responsive - css

Question

Take a look at this http://jsfiddle.net/0ftrnkxo/
and the site http://omarhabash.com/sites
This looks great from a desktop.. I usually dont have problems with responsive design but what can I do to make this responsive?
THE HTML
<div id="g-site1" class="col-xs-12 demo-container">
<div class="same-s same-1">
<img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="">
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#site1"> <i class="fa fa-search-plus"></i>
</button>
<div class="same-s same-2">
<img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/mac.png" alt="">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="site1" tabindex="-1" role="dialog" aria-labelledby="site1Label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content1">
<div class="modal-body">
<img class="img-responsive site" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="">
</div>
</div>
</div>
</div>
THE CSS
.same-s {
height: 160px;
width: 100%;
margin: 0 auto;
}
.same-s img {
width: 100%;
display: block;
margin: 0 auto;
height: auto;
}
.same-s.same-1 {
width: 66.5%;
overflow: scroll;
position: absolute;
margin-left: 174px;
margin-top: 65px;
height: 57.25%;
}
.demo-container {
height: 56em;
}
button.btn.btn-primary.btn-lg {
margin-left: 9.9em;
margin-top: 26.5em;
position: absolute;
}
img.site {
border: 4px solid #ccc;
}

Answer 1

With any grid system it's best to keep it and your content separate. Don't "hack the core", as the saying goes. Here's a simplified start:
http://jsfiddle.net/isherwood/0ftrnkxo/3
.demo-container {
overflow: hidden; /* demo only--accounts for image whitespace */
}
.mac {
position: relative;
margin: -5.3% -20.5% 0 -18.5%; /* demo only--accounts for image whitespace */
}
.screen {
position: absolute;
top: 9%; /* demo only--accounts for image whitespace */
right: 17%; /* demo only--accounts for image whitespace */
left: 15.6%; /* demo only--accounts for image whitespace */
height: 58%;
overflow: auto;
}
<div class="row">
<div class="col-xs-12">
<div class="demo-container">
<div class="mac">
<img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/mac.png" alt="" />
<div class="screen">
<img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
To eliminate all those negative margins and the corresponding values on .screen, crop your Mac image tight to the black border. Of course, you'll still need smaller top, right, and left values to allow the Mac's frame to show around it.
I'd also fill the Mac image's screen entirely with black. That will eliminate the need to so perfectly position what's overlaying it.
Here's a demo with two Macs in two rows.