7 Replies Latest reply on Apr 1, 2015 7:30 AM by actik2

    iframe with Edge Animate not responsive on iPhone

    mikeebaby Level 1

      I have successfully added an Edge Animate block to a Squarespace page. The only way I could figure out how to do it after scouring the Squarespace forums and googling was to use an iframe. It is working great EXCEPT for on the iPhone. The animation is not scaling so all you see is the top piece of it. Any ideas how to solve this?

      Page:

      https://karen-nagano.squarespace.com/

      HTML:

       

      <iframe src="https://karen-nagano.squarespace.com/assets/knlogoanim.html" frameborder="0"></iframe>

       

      Custom CSS:

      .edge { width: 50%; margin: 0px auto; }

      .iframewrapper { height: 0; width: 100%; padding-bottom: 49.78%; overflow: hidden; position: relative; }

      .iframewrapper iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

      Thanks in advance!