I have created an interactive infographic with the help of Adobe Animate and implemented it to my website: Infographic on my Website Unfortunately I don’t find a solution to make it responsive; it doesn’t scale when I resize the window or view the graphic on my mobile phone.
Since the responsive function, which I was able to set in the “Publish Settings”, only produced strange results, I tried to find another solution to make the graphic responsive.
To do this, I first switched off the EventListener, which overwrote my manually created width and height values when the window size was changed.
In theory, my solution now works: If I adjust the settings in the Chrome Developer Tools on a trial basis (width: 100%. height: auto), the reponsive adjustment of the image works perfectly in this preview.
However, if I then incorporate these changes into my website code, it does not work. The script simply overwrites my values when the page is loaded.
I tried to get the script to use my required values for width and height, but this also failed.
This script section:
loader.loadManifest(lib.properties.manifest);
loads these values:
// library properties:
lib.properties = {
id: '4A0DC7F22C54B9489C856D25CD90F5DC',
width: 650,
height: 2179,
fps: 24,
color: "#FFFFFF",
opacity: 1.00,
manifest: [
{src:"https://static1.squarespace.com/static/597c793a4c0dbf2d3c6a1490/t/66506af2b083c43608fd66c8/1716546290943/nabuinsekteninfografikelisabethdeim1500px.png", id:"nabuinsekteninfografikelisabethdeim1500px"}
],
preloads: []
};
into this HTML section
HTML section:
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:650px; height:2179px">
<canvas id="canvas" width="650" height="2179" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:650px; height:2179px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
If I adjust this section as follows in the Developer Tools in Chrome, the image can be scaled responsively without any problems:
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:650px; height:2179px">
<canvas id="canvas" width="650" height="2179" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);width: 100%; height: auto;"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:650px; height:2179px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
Unfortunately, I can’t find a solution for how I have to adapt the script so that this code is loaded at the end.
“width=”715″ height=”2396″ changes to width=”650″ height=”2179” and “;width: 100%; height: auto;” changes to “;width: 650px; height: 2179px;” when I reload the page.
I hope someone of you has an idea or even a cleaner solution to make the graphic responsive.
Many thanks in advance for your efforts!
Elisabeth
Elisabeth Deim is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.