# Inconsistent sizing on webpage

**URL:** <https://discourse.threejs.org/t/inconsistent-sizing-on-webpage/5432>\
**Category:** Questions\
**Tags:** webglrenderer\
**Created:** [December 20, 2018, 1:18am UTC](https://discourse.threejs.org/t/inconsistent-sizing-on-webpage/5432 "2018-12-20T01:18:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ayma](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@Ayma](https://discourse.threejs.org/u/Ayma)\
**Post date:** [December 20, 2018, 1:18am UTC](https://discourse.threejs.org/t/inconsistent-sizing-on-webpage/5432/1 "2018-12-20T01:18:43Z")

</div>

The three.js scene is always the size of the window when it`s loaded. Picture 1 shows what the scene looks like when it was loaded while the window was shrunk. Picture 2 shows what the scene looks like when the window was full size.  
 ![threejsinwebpagehowtomanipulate1](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/4/4a7b96bc7651e1d8d3a5c6172e58a2efbf33a513.png) ![threejsinwebpagehowtomanipulate2](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/6/62fd79cb6a5fdc6d1ad55ee57e80af8699a87eea.png)  
Also, I’d like to have the scene render beside a picture or other html element (in the empty pink space with the inputs). How can I achieve this? Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Ayma](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@Ayma](https://discourse.threejs.org/u/Ayma)\
**Post date:** [December 20, 2018, 1:19am UTC](https://discourse.threejs.org/t/inconsistent-sizing-on-webpage/5432/2 "2018-12-20T01:19:39Z")

</div>

It’s a little confusing so I can provide more visuals or explain better if required.

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [December 20, 2018, 1:27am UTC](https://discourse.threejs.org/t/inconsistent-sizing-on-webpage/5432/3 "2018-12-20T01:27:23Z")

</div>

You need an event listener for when the window is resized:

```
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

```

If you don’t want it to take the whole page, you can always change `window.innerWidth` to whatever value you want to use.

---

<div class="post-metadata">

**Author:** ![Ayma](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@Ayma](https://discourse.threejs.org/u/Ayma)\
**Post date:** [December 20, 2018, 1:45am UTC](https://discourse.threejs.org/t/inconsistent-sizing-on-webpage/5432/4 "2018-12-20T01:45:22Z")

</div>

Thank you, That did it! Would you also happen to know the 2nd part to my question? I would like to add a photo or other html element in the blank pink space beside the scene.

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [December 20, 2018, 4:54am UTC](https://discourse.threejs.org/t/inconsistent-sizing-on-webpage/5432/5 "2018-12-20T04:54:13Z")

</div>

It’s right there in my original answer.

> If you don’t want it to take the whole page, you can always change `window.innerWidth` to whatever value you want to use.

If you need further help creating the other HTML elements and adding an image, maybe searching any [intro to HTML + CSS tutorial](https://www.udemy.com/courses/search/?src=ukw&q=css) would help.