I have a page containing two responsive Datawrapper graphics from Google Trends. When embedding only one of them, they display correctly on the page. But with two on the page, the height of the second one displays incorrectly (it is much smaller than it should be). If I reverse the order of the two embeds, it is always the second one on the page that displays the height incorrectly.
To illustrate this problem, I have created a CodePen example that shows the problem. If you switch the order of the two embeds, the second one always displays incorrectly.
https://codepen.io/Jdo300/pen/ExExZBz
To address this problem right now, my current workaround (for the second Datawrapper) is to add the following code above the embed:
<style>
/* Height for large displays */
iframe {
height: 376px;
}
/* Height for small displays */
@media screen and (max-width: 1140px) {
iframe {
height: 573px;
}
}
</style>
This workaround explicitly sets the height of the second Datawrapper based on the width of the viewport, but I have to manually determine the points where the embed changes shape based on the width and manually set the height each time and don't want to have to do this for every graph we add.
Is there a better solution or simple workaround to prevent the height from displaying incorrectly?