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.
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.
I want to share my project but do not know how to include it in this massage.
Hi, you can zip the files and upload it in Adobe Cloud or Dropbox, whichever you like, and share the link with us.
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,
I use bootsrap class to create my grid:
<div class="content section5">
<div class="col-md-4 col-md-offset-2 clearfix">
<div id="Stage" class="section5__screen_02"></div>
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;
Please share the project, to take a closer view.
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%;
does this help you what i do wrong?
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.