# Resizing Babylon Engine

**URL:** <https://forum.babylonjs.com/t/resizing-babylon-engine/5633>\
**Category:** Questions\
**Created:** [September 13, 2019, 10:10am UTC](https://forum.babylonjs.com/t/resizing-babylon-engine/5633 "2019-09-13T10:10:22Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![wulcat](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wulcat/32/4404_2.png) [@wulcat](https://forum.babylonjs.com/u/wulcat)\
**Post date:** [September 13, 2019, 10:10am UTC](https://forum.babylonjs.com/t/resizing-babylon-engine/5633/1 "2019-09-13T10:10:22Z")

</div>

Hello,  
I am trying to resize Babylon to the mobile view. I successfully scaled Babylon engine, but when I do that the GUI interactions don’t resize when the images (visible GUI) have properly scaled.  
Here’s what I have done :

```
<div class="game" ![babylon|334x500](upload://6hqyN46WCUvA9H2eLuNYO3v0rvr.jpeg) >
     <canvas id="renderingGame">
</div>

// After the engine has loaded
engine.setSize(980,1720)

```

I’m also trying setting

```
advancedTexture.idealHeight = 1720
advancedTexture.idealWidth = 980

```

 ![babylon](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/2/2c05645e8c324a419c39929cb89588ff6286f219.jpeg)

Problem 🙂 :  
From the above image, (1) is a ImageBasedGUIButton & is correctly scaled to the the iphone resolution. But when i try clicking the (1) it doesn’t work, rather clicking in the position of (2) it works. It seems everything resized except the interactions on canvas.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [September 13, 2019, 2:48pm UTC](https://forum.babylonjs.com/t/resizing-babylon-engine/5633/2 "2019-09-13T14:48:57Z")

</div>

Could you kindly reproduce your problem in Playground?

---

<div class="post-metadata">

**Author:** ![wulcat](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wulcat/32/4404_2.png) [@wulcat](https://forum.babylonjs.com/u/wulcat)\
**Post date:** [September 15, 2019, 8:53am UTC](https://forum.babylonjs.com/t/resizing-babylon-engine/5633/3 "2019-09-15T08:53:58Z")

</div>

Playground , i doubt that. Maybe i can produce in Codepen , hold on.

---

<div class="post-metadata">

**Author:** ![aFalcon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/afalcon/32/7015_2.png) [@aFalcon](https://forum.babylonjs.com/u/aFalcon)\
**Post date:** [September 15, 2019, 9:39pm UTC](https://forum.babylonjs.com/t/resizing-babylon-engine/5633/4 "2019-09-15T21:39:12Z")

</div>

Welcome to the forum wulcat, here is what labris means by playground:  
[https://www.babylonjs-playground.com/#U5SSCN#34](https://www.babylonjs-playground.com/#U5SSCN#34)  
Just in case. You probably knew that.  
Not sure if it solves GUI, but here is what I use for resize to mobile:

```auto
window.addEventListener('resize', function(){ nx.engine.resize(); });

```

---

<div class="post-metadata">

**Author:** ![Maya\_Rahto](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/maya_rahto/32/7838_2.png) [@Maya\_Rahto](https://forum.babylonjs.com/u/Maya_Rahto)\
**Post date:** [April 23, 2020, 3:37am UTC](https://forum.babylonjs.com/t/resizing-babylon-engine/5633/5 "2020-04-23T03:37:31Z")

</div>

I have the same problem.