Trying to embed a three.js scene with toggle switches inside a Bootstrap grid. The issue is that my canvas, which is inside a column, doesn't align properly with the text column on the same row. Any assistance would be greatly appreciated.
Preview: View Preview
HTML:
<section id="intro">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 textContainer ">
<p>Lorem Ipsum passage variations are available, but most have suffered alteration in some form, injected humor or random words that don't appear believable.
If you're using Lorem Ipsum, ensure there's nothing embarrassing hidden within the text. Lorem Ipsum generators online tend to repeat predefined chunks, making this the first genuine generator on the web.
It utilizes over 200 Latin words combined with various sentence structures to generate realistic Lorem Ipsum. It is always free from repetition, injected humor, or unusual words.</p>
</div> <!-- col end -->
<div class="col-lg-8 col-md-8">
<div id="myCanvas"></div>
<button id="polychrome"></button>
<button id="blue"></button>
<button id='PausePlay'>Pause</button>
</div> <!-- col end --->
</div> <!--row end -->
</div> <!-- container end -->
</section>CSS:
html, body {
direction: rtl;
font-family: 'Heebo', sans-serif;
-webkit-font-smoothing: antialiased;
margin: 0;
overflow: hidden;
}
.background {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: -99;
background-color: lightgray;
background-repeat: no-repeat;
background-size: cover;
}
Javascript:
// JavaScript code goes here