Three.js rendering and bootstrap grids

Question

I am playing around with three.js and bootstrap. But, when using the bootstrap grids, my cube gets flattened like this:

http://imgur.com/a/Ec2Rx

Though when resizing the window, it works fine:

http://imgur.com/a/xpmVu

I have tried to fix this in css, but it didn't work:

CSS

@media(min-width:768px) { 

canvas {
    display: block;
    width: 100% !important;
    height: 33% !important;
}
}

canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

Any ideas?

EDIT:

I also tried to work with the js code, but also no results:

JS:

renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.getElementById('render').appendChild( renderer.domElement );
    window.addEventListener( 'resize', onWindowResize, false );

    render();
}

function onWindowResize() {

if (window.matchMedia('(min-width:768px)').matches) {
    renderer.setSize(window.innerWidth, window.innerHeight * 0.33);
    camera.updateProjectionMatrix();
    camera.aspect = window.innerWidth / window.innerHeight;
    render();
}

else {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    render();
}

}

Answer 1

Your issue is probably that your using window.innerWidth and window.innerHeight.
Using these is fine is you want your three.js canvas to fill the whole window, but it seems as if you are putting your three.js canvas inside of a div.
Instead of using window.innerWidth and window.innerHeight, you probably want to use the width and height of the container div.

You probably want to use something like document.getElementById('myDiv').style.height or document.getElementById('myDiv').clientHeight instead.