0 Replies Latest reply on Jun 27, 2013 10:20 AM by kellisswan

    Responsive animation difficulty - stage height fixed?

    kellisswan

      I just created my first, fairly simple edge project - a header for my website. I made the project responsive, and it works well on preview in browser. However when I inserted it into Dreamweaver, it was not responsive, so I added an embed class with width=100% and height=auto. That did indeed cause the edge animation images to respond nicely, however there appears to be a fixed stage height involved, and I can't figure out how to fix it.  As my navigation bar falls just below this header graphic, the nav gets pushed way down on smaller devices.

       

      Also, when I add the embed class, the entire graphic becomes hidden while working in Dreamweaver, except when viewing as "Live". I took out the height=auto as it wan't having the desired effect anyways, and then I could see the graphic in Dreamweaver again.

       

      Here's what I have so far: http://www.pencilplace.com/

       

       

      Member "BigMucho" posted the following teak on another thread [http://forums.adobe.com/message/5234102#5234102]. This does work for me ... will use this unless/until somebody can shed other, easier light on the subject of making an animation responsive for width & height. 

       

      *** Posted by BigMucho***

      A few tweaks to the Edge HTML / CSS and you're good to go.  Inside Edge, make sure all height and width units are set to percentage (including the stage).  This technique also works well with non-Edge content, no jQuery required.

       

      HTML:

       

      <body>

          <div id='aspectwrapper'>

              <div id='content'>

       

                  <!-- The Good Stuff Lives Here -->

       

              </div>

          </div>

      </body>

       

       

      CSS:

       

      #aspectwrapper {

                display:inline-block;

                width:100%;

                position:relative;

      }

       

      #aspectwrapper::after {

                padding-top:56.25%;

           // Use this percentage for 16:9, get yours via: Height / Width * 100

                display:block;

                content:'';

      }

       

      #content {

                position:absolute;

                top:0;

                bottom:0;

                right:0;

                left:0;

                overflow:hidden;

      }