Slideshow cutting in half when full screen

I want to take down Flikr slide shows off a website as the Flikr slideshow still uses flash and that means mobile/tablets can see it.

I’ve found this: https://flickrit.com which uses iframes and javascript.

I created a slide show and tested it on this demo site:

http://demo.aimeecreative.com/?page_id=95 which the client approved to go up on their live site.

But when I put it on a hidden test page on the site it is cutting in half when full screen?

http://www.ellieymakeup.com/test/

ANY IDEAS ??????

Both the demo and Ellie y Website are using fruitful template. Ellie y only has google analytics, Flikr slide and google fonts plug-in (I deactivated them one by one to see if that made a difference and it didn’t).

Demo is 4.0.1 Ellie Y is 3.9.3 – I upgraded the fruit template to the latest and this hasn’t helped.

Any ideas what might be causing this? It is fine when the screen scales down.

This is the code for the slide show:

<div style=”position: relative; padding-bottom: 101%; height: 0; overflow: hidden;”><iframe id=”iframe” style=”width: 100%; height: 100%; position: absolute; top: 0; left: 0;” src=”http://flickrit.com/slideshowholder.php?height=100&size=big&setId=72157628130837520&thumbnails=0&transition=0&layoutType=responsive&sort=0&#8243; width=”300″ height=”150″ frameborder=”0″ scrolling=”no”></iframe></div>

Thank you in advance, I’m totally miffed!