0 Replies Latest reply on Jan 22, 2015 5:58 PM by BernardDigital

    Responsive Design with Animate and Reflow

    BernardDigital Level 2

      So here is an interesting question... If anyone knows how to do this I will be forever grateful

       

      I am trying to make a responsive single web page... I know I could do it all in animate but we want the text to be HTML and a few other things... So I made a reflow project with all the text where we want and where we want for the resized... I made just an empty box with the dimensions we want to have for the animation part... All works... Ok cool...


      So now the hard part... I made two different animate projects... One has the dimensions for full screen and the other has the dimensions for mobile.... Now to add them into the responsive page I made from reflow...


      I replaced the div (box part from reflow) with this

      <div id="Stage" class="Cat-Site-Full">
      <div id="Stage" class="Cat-Site-Tablet">


      And added the correct header code for both stages...


      I then went into the css from reflow and changed the .box to be .Cat-Site-Full  and then bellow the media query i changed that .box to be the .Cat-Site-Tablet

       

      I thought this would work but it does not I also tried adding .Cat-Site-Tablet {display: none;} for the main size page and then did the opposite for the media query mobile page size... But no luck...

       

      If anyone knows how to show different edge animate stages for different media query sizes that would be amazing!!!!

       

      Thank you so much!!!