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,17 +51,37 @@
 }
 
 .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
 

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,23 +41,21 @@ 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">
+              <Bubble h1="Join us at our" h2="GBMs 🤝">
                 <span>
-                Welcome to the Illinois Tech Robotics Club! We are a student-run
+                  Welcome to the Illinois Tech Robotics Club! We are a
-                organization that promotes the field of robotics through
+                  student-run organization that promotes the field of robotics
-                hands-on projects, competitions and events. Open to students of
+                  through hands-on projects, competitions and events. Open to
-                all majors and skill levels, we meet every week at 6:30pm CST to
+                  students of all majors and skill levels, we meet every week at
-                work on exciting robotics projects.
+                  6:30pm CST to work on exciting robotics projects.
                 </span>
               </Bubble>
               <Bubble
-              top="5vh"
-              left="30vw"
                 h1="Directions to the"
                 h2="ITR Lab 🗺️"
               >
@@ -72,13 +70,14 @@ export default class Home extends Component {
                   3. Once in the basement, take a right from the elevator and
                   enter the last door on the left.
                   <br />
-                4. Finally, sign in to the Elevate Underground Lab with the CLA
+                  4. Finally, sign in to the Elevate Underground Lab with the
-                on guard!
+                  CLA on guard!
                 </span>
               </Bubble>
             </div>
           </div>
         </div>
+      </div>
     );
   }
 }