9 Replies Latest reply on Oct 14, 2014 4:54 AM by vivekuma

    Responsive project not scale in own webpage

    katjevdw

      Hi,

       

      I want to create an responsive image animation with edge animation and include the published project in my own webpage.

      The settings responsive scaling are enabled together with the center stage but it will not resize on my mobile device and own web page.

       

      Do i have to do something more to get it scaled on mobile devices?.

       

      kind regards

        • 1. Re: Responsive project not scale in own webpage
          vivekuma Adobe Employee

          Hi,

          Are you facing this issue only on mobile devices or on Computers as well?

          It will be easier for us to find the issue if you can share your files.

           

          Regards,

          Vivekuma

          • 2. Re: Re: Responsive project not scale in own webpage
            katjevdw Level 1

            Vivekuma,


            I have it also on desktop when i add the div into my page layout or when i want to test the preview in chrome for mobile devices . (created with bootstrap css).

            The animation is very simple.

            see image:

            section5.html - Adobe Edge Animate CC 2014.png


            I want to share my project but do not know how to include it in this massage.


            regards,

            katleen

            • 3. Re: Responsive project not scale in own webpage
              vivekuma Adobe Employee

              Hi, you can zip the files and upload it in Adobe Cloud or Dropbox, whichever you like, and share the link with us.

              • 5. Re: Responsive project not scale in own webpage
                vivekuma Adobe Employee

                This Edge composition is fine, the way you are inserting in other html page matters.

                 

                Try the following steps:

                     1. Specify the height and width of the html container where you are putting the Edge stage div.

                     2. Set the position of Stage div's parent or container div to absolute.

                 

                For better results, make "Center Stage" for Stage in Edge Animate to "Both", then follow the above steps.

                 

                If still this doesn't resolve your issue, share the html page where you are inserting the Edge composition.

                 

                hope that helps,

                Vivekuma

                • 6. Re: Responsive project not scale in own webpage
                  katjevdw Level 1

                  Vivekuma,

                   

                  I use bootsrap class to create my grid:

                   

                  <section data-scroll-index="4">

                      <div class="content section5">

                           <div class="container-fluid">

                                  <div class="row">

                                        <div class="col-md-4 col-md-offset-2 clearfix">

                                                <div id="Stage" class="section5__screen_02"></div>

                                           </div>

                                    </div>

                                </div>

                           </div>

                      </div>

                  </section>


                  If i understand it correct is that you mean that i have to put the section5__screen_02 to absolute?

                  the parent container have already a class col-md-4 that have a a width: 33.33333% and position:relative;


                  regards,

                  katleen

                  • 7. Re: Responsive project not scale in own webpage
                    vivekuma Adobe Employee

                    Please share the project, to take a closer view.

                    • 8. Re: Responsive project not scale in own webpage
                      katjevdw Level 1

                      I can not share that part of my project.

                       

                      with the absolute position on the container of the stage it resize the animation but not correct.

                      he start at the correct position on my page but the with is still to big. he takes the size of my window.width and not from my parent wrapper div. that has a width of 100%;

                      layout.png

                      does this help you what i do wrong?

                      • 9. Re: Responsive project not scale in own webpage
                        vivekuma Adobe Employee

                        Hi,

                        You need to do three things:

                             1. There is no jquery.js file in the project you shared, so better download a jquery and put in inside js folder. Change the name of jquery included in the html page accordingly.

                             2. The bootstrap class specified to the container of the Edge animate stage div tag, need to be changed as per your requirement depending upon the devices size.

                                 Bootstrap is a 12-grid layout framework, so the class="col-md-2 col-sm-2 col-xs-2 col-md-offset-3 clearfix" should be written such a way that grids should sum upto 12.

                                 The class I would suggest for the container is class="col-md-6 col-sm-8 col-xs-10 col-md-offset-3 col-sm-offset-2 col-xs-offset-1 clearfix",

                                       so that for md(medium devices) = 3 + 6 + 3 = 12

                                                       sm(small devices)    = 2 + 8 + 2 = 12

                                                       xs(extremelysmall devices) = 1 + 10 + 1 =12

                                  Read more about Bootstrap here, to experiment about the layout. And create a class as per the layout you need for Edge composition.

                             3. You missed to put the style tag that is there in Edge composition in the final html page.

                         

                        hth,

                        Vivekuma