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?