I need to be able to make an iframe responsive and scroll when viewed on mobile device

I am creating a tshirt sales site that is iframing content (the actual shirts) onto my wordpress theme. The problem I have is that when viewed on a mobile device the iframe is not responsive and does not scroll so the collection cannot be viewed. I have attempted to work on this but I have not been able to get it to work for me and my site. I have found a couple of articles explaining that this can be done but I do not know enough about editing the css to get this to work for me. This should be a relatively simple job for someone who understands this technical stuff. here is a link to the articles explaining this process. [login to view URL] [login to view URL] To be clear I HAVE to have the content of the iframe responsive and scrollable so that a user viewing on an iPhone will be able to browse the collection to select and purchase shirts. I am using wordpress 4.0.1 with theme Kallyas [login to view URL] Here is my current code: <div class="shirt-container"><iframe src="[login to view URL]" style="border:0px black solid;" name="ctdiframe" scrolling="yes" frameborder="0" align="center" height="3500px" width="100%"> </iframe> </div> and here is my CSS /* Theme Name: Kallyas Theme URI: [login to view URL] Description: A Highly customizable theme with page builder and unlimited colors. Author: Hogash Author URI: [login to view URL] Version: 3.6 Tags: dark, light, left-sidebar, right-sidebar, fixed-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, full-width-template, theme-options, translation-ready License: GNU General Public License License URI: [login to view URL] */ .shirt-container { position: relative; padding-bottom: 10%; height: 3500px; overflow: hidden; } .shirt-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }