better scaling

src/assets/stylesheets/bubble.scss

@@ -14,11 +14,11 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding-bottom: 50px;
+  margin: 30px; 
 }
 
 .bubble_main {
-  width: 40vw;
+  width: 100%;
 }
 
 .bubble_main h1 {
@@ -60,7 +60,7 @@
 @media screen and (max-width: 650px) {
   // Phones
   .bubble_main {
-    width: 80vw;
+    width: auto;
   }
 
   .bubble_main h1 {

src/assets/stylesheets/home.scss

@@ -51,18 +51,38 @@
 }
 
 .home__content__info {
-  height: auto;
+  height: 100vh;
   width: 100%;
   margin: 0px;
   padding: 0px;
   background: linear-gradient(#353535, #232323);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
+
+.c {
+  margin: 0px;
+  padding: 0px;
+  width: 80%;
+  height: 80%;
+  position: relative;
+  display: flex;
+  opacity: 100%;
+  flex-direction: column;
+  justify-content: center;
+  background: transparent;
+  z-index: 0;
 }
 
 @media screen and (max-width: 650px) {
   // Phones
+  .home__content__panel__title {
+    font-size: 45px;
+  }
 }
 
-
 // Animations
 
 @keyframes textSlide {

src/components/Bubble.js

@@ -6,10 +6,10 @@ export default class Bubble extends Component {
   render() {
     return (
       <div
-        style={{
+        // style={{
-          marginLeft: `${this.props.left}`,
+        //   marginLeft: `${this.props.left}`,
-          paddingTop: `${this.props.top}`,
+        //   paddingTop: `${this.props.top}`,
-        }}
+        // }}
       >
         <div className="bubble">
           <AnimationOnScroll

src/components/Home.js

@@ -41,41 +41,40 @@ export default class Home extends Component {
               className="home__content__panel__video"
               type="video/mp4"
               src={backgroundVideo}
-            >
+            ></video>
-            </video>
           </div>
 
           <div className="home__content__info">
-            <Bubble top="10vh" left="30vw" h1="Join us at our" h2="GBMs 🤝">
+            <div className="c">
-              <span>
+              <Bubble h1="Join us at our" h2="GBMs 🤝">
-                Welcome to the Illinois Tech Robotics Club! We are a student-run
+                <span>
-                organization that promotes the field of robotics through
+                  Welcome to the Illinois Tech Robotics Club! We are a
-                hands-on projects, competitions and events. Open to students of
+                  student-run organization that promotes the field of robotics
-                all majors and skill levels, we meet every week at 6:30pm CST to
+                  through hands-on projects, competitions and events. Open to
-                work on exciting robotics projects.
+                  students of all majors and skill levels, we meet every week at
-              </span>
+                  6:30pm CST to work on exciting robotics projects.
-            </Bubble>
+                </span>
-            <Bubble
+              </Bubble>
-              top="5vh"
+              <Bubble
-              left="30vw"
+                h1="Directions to the"
-              h1="Directions to the"
+                h2="ITR Lab 🗺️"
-              h2="ITR Lab 🗺️"
+              >
-            >
+                <span>
-              <span>
+                  1. Enter through the{" "}
-                1. Enter through the{" "}
+                  <a href="https://goo.gl/maps/NJW5LzDDBYoHiD5X6">IIT Tower</a>{" "}
-                <a href="https://goo.gl/maps/NJW5LzDDBYoHiD5X6">IIT Tower</a>{" "}
+                  located at 10 W 35 St, Chicago, IL.
-                located at 10 W 35 St, Chicago, IL.
+                  <br />
-                <br />
+                  2. Sign in with the front desk, and then take the elevator to
-                2. Sign in with the front desk, and then take the elevator to
+                  the basement.
-                the basement.
+                  <br />
-                <br />
+                  3. Once in the basement, take a right from the elevator and
-                3. Once in the basement, take a right from the elevator and
+                  enter the last door on the left.
-                enter the last door on the left.
+                  <br />
-                <br />
+                  4. Finally, sign in to the Elevate Underground Lab with the
-                4. Finally, sign in to the Elevate Underground Lab with the CLA
+                  CLA on guard!
-                on guard!
+                </span>
-              </span>
+              </Bubble>
-            </Bubble>
+            </div>
           </div>
         </div>
       </div>