Mobile Site Demo

index.html

<figure id="mobilePreview">
  <div class="phone">
    <img class="phone" src="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/phoneCutout.png" alt="iPhone" />
  </div>
  <div class="site">
    <img class="site" src="http://webplus.televoxsites.com/chase/goldfinger3/includes/images/admiralMobile.jpg" alt="Admiral Starter Mobile Version" />
  </div>
</figure>

mobile-site-demo.markdown

Mobile Site Demo

A Pen by Chase Harrison on CodePen.

License.

style.css

figure#mobilePreview {position: relative; margin: 0; padding: 0; display: inline-block; width: 230px; overflow: hidden;}
figure#mobilePreview div.phone {position: relative; z-index: 101;}
figure#mobilePreview div.site {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 30px 10px 30px 10px; height: 361px; overflow-y: scroll; z-index: 102}
figure#mobilePreview div.site::-webkit-scrollbar {width: 0px; background: transparent;}
figure#mobilePreview div.site img {max-width: 100%}