title: Three.js rendering and bootstrap grids
body: <p>I am playing around with three.js and bootstrap. But, when using the bootstrap grids, my cube gets flattened like this:</p>
  
  <p><a href="http://imgur.com/a/Ec2Rx" rel="nofollow">http://imgur.com/a/Ec2Rx</a></p>
  
  <p>Though when resizing the window, it works fine:</p>
  
  <p><a href="http://imgur.com/a/xpmVu" rel="nofollow">http://imgur.com/a/xpmVu</a></p>
  
  <p>I have tried to fix this in css, but it didn't work:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@media(min-width:768px) { 
  
  canvas {
      display: block;
      width: 100% !important;
      height: 33% !important;
  }
  }
  
  canvas {
      display: block;
      width: 100% !important;
      height: 100% !important;
  }
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p><strong><em>EDIT:</em></strong></p>
  
  <p>I also tried to work with the js code, but also no results:</p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>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();
  }
  
  }
  </code></pre>