Evolve Hack:
Removing the iFrame Margin

In this article, I’ll describe a particular issue I often needed to solve in Evolve Authoring and provide code that you can copy and paste to solve it too.

To apply the code, you’ll need to refer to my article Applying Your Hacks, and for full context of why hacks are necessary, you can refer to Hacking Evolve Authoring.

A few times while building courses in Evolve Authoring I inserted iFrames with Lottie animations inside them that I needed to sit stacked and flush against each other. Unfortunately, what I found was that they usually had a gap between them.

This hack removes that gap so that to iFrames can sit right up against each other.

Add some iFrames

iFrames are useful if you want to insert HTML content you’ve made elsewhere, such as a Lottie animation, a Rive animation, or an Adobe Animate interactive element. Check out my article article on Lottie animations if you’re never heard of them.

Add the styling code below according to my articles Hacking Evolve Authoring and Applying Your Hacks, and you’re iFrame spacing troubles be gone!

/* Remove iFrame margin - v1: 23/12/2019 */
.ev-iFrame-widget {
  font-size: 0;
}

That’s it!

While that worked for me, that doesn’t mean it will still work for you. Evolve updates often, so always be sure to test the code before you use it and any time you export. Evolve may have even improved this feature such that it’s no longer necessary by the time you read this article.

However, if you’re trying to apply it and it doesn’t work, let me know if you modify the code to work and I’ll update this article.

Thanks…

I also dissect and speculate on design and development.
Digging into subtle details and implications, and exploring broad perspectives and potential paradigm shifts.
Check out my conceptual articles on Substack or find my latest below.

You can also find me on Threads, Bluesky, Mastodon, or X for more diverse posts about ongoing projects.