I made an Edge animation with a stage which is, natively, 1600x900px. I've included it in an <iframe> linking to the HTML file outputted by Edge, on the page where it's to be displayed; as not all displays support this resolution, I wanted to use CSS media queries to resize the animation as the resolution went down. I've set up the @media syntax, and added the transform:scale(x,y) property to the iframe tag. Since they're cascading stylesheets, I though that the transform would also affect the Edge animation's elements, including the stage; however, it didn't, for some reason.<br>
The problem consists of the entire animation resizing properly as the browser window gets resized, except the stage itself, which stubbornly stays at 1600px wide.<br>
My second attempt at resolving the problem was getting the class names and IDs of the animation's divs using my browser's web inspector; I found "#stage" and ".splash (which is the name of my Edge project). I tried adding CSS rules in my main stylesheet, then in the Edge HTML file itself, which would scale these elements; to no effect.<br>
I've tried everything I can think of at this point. Should I use a different method than iframe? What else can I do?

One other aproach is to type manually and code your site some websites maker like the one above has only one problem they add stuff that you don't want need or t is deprecated so it's very hard to find what you are looking for

I'm using Dreamweaver, so I have full code view and highlighting. CSS3 animations (which Edge makes use of in conjunction with JavaScript) are a new technology, so there's no risk of anything being deprecated.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.