# Set height of IFRAME for different devices?

**URL:** <https://community.evolveauthoring.com/t/set-height-of-iframe-for-different-devices/4089>\
**Category:** All-New Evolve - Questions\
**Tags:** component\
**Created:** [March 3, 2026, 2:54pm UTC](https://community.evolveauthoring.com/t/set-height-of-iframe-for-different-devices/4089 "2026-03-03T14:54:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anders](https://avatars.discourse-cdn.com/v4/letter/a/59ef9b/32.png) [@Anders](https://community.evolveauthoring.com/u/Anders)\
**Post date:** [March 3, 2026, 2:54pm UTC](https://community.evolveauthoring.com/t/set-height-of-iframe-for-different-devices/4089/1 "2026-03-03T14:54:30Z")

</div>

My content relies partly on IFRAMES and the content of those are dependant on the width _and height_ of the iframe itself. The width is set for PC, Tablet and Mobile via CSS (I assume?), but the height is set for the component independently on device. Would it be possible to set height depentent on device screen size?

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/evolveauthoring/original/2X/c/cc6a39f2b06b1cab66fbbcc68c6a3483f9c6e6ac.png)

---

<div class="post-metadata">

**Author:** ![Matt\_Leathes](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/matt_leathes/32/586_2.png) [@Matt\_Leathes](https://community.evolveauthoring.com/u/Matt_Leathes)\
**Post date:** [March 3, 2026, 4:17pm UTC](https://community.evolveauthoring.com/t/set-height-of-iframe-for-different-devices/4089/2 "2026-03-03T16:17:32Z")

</div>

That’s a good callout - in Legacy Evolve you could set a different height for mobile but New Evolve doesn’t have that, let alone the ability to set for tablet as well. Will pass this request on.

Appreciate this may not be ideal, but as a workaround you could have three iframe elements and show/hide each based on device size using Logic.

---

<div class="post-metadata">

**Author:** ![Anders](https://avatars.discourse-cdn.com/v4/letter/a/59ef9b/32.png) [@Anders](https://community.evolveauthoring.com/u/Anders)\
**Post date:** [March 3, 2026, 5:47pm UTC](https://community.evolveauthoring.com/t/set-height-of-iframe-for-different-devices/4089/3 "2026-03-03T17:47:56Z")

</div>

Another solution COULD be if the height set in “IFrame height” field could be the value of a variable?

If that was possible I could set that variable in course logic as you suggest, without having to add multiple Iframes (which, I guess, would confict with the solution you gave for my earlier problems with iFrames not rendering while being hidden).

---

<div class="post-metadata">

**Author:** ![Matt\_Leathes](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/matt_leathes/32/586_2.png) [@Matt\_Leathes](https://community.evolveauthoring.com/u/Matt_Leathes)\
**Post date:** [March 3, 2026, 6:35pm UTC](https://community.evolveauthoring.com/t/set-height-of-iframe-for-different-devices/4089/4 "2026-03-03T18:35:25Z")

</div>

> [@Anders](#):
>
> Another solution COULD be if the height set in “IFrame height” field could be the value of a variable?

Not possible at the moment, I’m afraid. Interesting idea though…

> [@Anders](#):
>
> which, I guess, would confict with the solution you gave for my earlier problems with iFrames not rendering while being hidden

_Maybe_ not, I’m thinking that perhaps it could be done by using two variables?

Assuming you were revealing the iframe when a specific element was completed you could instead set a variable when it’s completed and have another variable that stores the device size (Global Action \> Device Size Changed \> Set Variable Text).

Then you could have a set of Global Actions like:  
IF `elementCompleted` is Equal to `true` AND  
IF `deviceSize` is Equal to `'desktop'` THEN  
SHOW element ‘desktop iframe’ THEN  
HIDE elements ‘tablet iframe’ & ‘mobile iframe’

But I completely appreciate that at this point it’s getting pretty complicated!

---

<div class="post-metadata">

**Author:** ![Anders](https://avatars.discourse-cdn.com/v4/letter/a/59ef9b/32.png) [@Anders](https://community.evolveauthoring.com/u/Anders)\
**Post date:** [March 4, 2026, 8:21am UTC](https://community.evolveauthoring.com/t/set-height-of-iframe-for-different-devices/4089/5 "2026-03-04T08:21:05Z")

</div>

Agree, complicated. We’re getting close to allowing me to write javascript sections INTO Evolve (which would be fun).

Having a variable that sets the height parameter seems _a little_ simpler. 😉

---

<div class="post-metadata">

**Author:** ![Anders](https://avatars.discourse-cdn.com/v4/letter/a/59ef9b/32.png) [@Anders](https://community.evolveauthoring.com/u/Anders)\
**Post date:** [May 19, 2026, 7:41am UTC](https://community.evolveauthoring.com/t/set-height-of-iframe-for-different-devices/4089/6 "2026-05-19T07:41:52Z")

</div>

Any progress on this issue? In dev tree? My iframes look pretty weird on mobile…

on Desktop vs mobile:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/evolveauthoring/original/2X/f/f4bae956d649fc5e3af57fe0b3e7fa4a10f5988e.png)

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/evolveauthoring/original/2X/4/483fd895ae51ff02b94296c53fdecd04906e6cda.png)
