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 div
s 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?
Patiodude 0 Newbie Poster
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.