Adjusting mobile view

acmucsd · Aug 27, 2024 · 6e771a5 · 6e771a5
1 parent 11cd04e
commit 6e771a5
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 13 deletions.
diff --git a/src/components/type-animation/index.tsx b/src/components/type-animation/index.tsx
@@ -18,7 +18,7 @@ const TypeAnimation: React.FC = () => {
   }, []);
 
   return (
-    <div className={styles.landing_title}>
+    <div className={styles.word_container}>
       {currentWord === 'build' && <Typewriter text={currentWord} />}
       {currentWord === 'break' && <span className={styles.break}>{currentWord}</span>}
       {currentWord === 'innovate' && <span className={styles.innovate}>{currentWord}</span>}

diff --git a/src/components/type-animation/style.module.css b/src/components/type-animation/style.module.css
@@ -1,4 +1,4 @@
-.landing_title {
+.word_container {
   background-color: var(--docs-dark-bg);
   width: 60%;
   padding: 0.5rem;

diff --git a/src/sections/Hero/style.module.css b/src/sections/Hero/style.module.css
@@ -21,7 +21,7 @@
 
 /* Landing Card Icons */
 
-.backdrop_left, .backdrop_right {
+.backdrop_left {
     object-fit: contain;
     width: 100%;
     height: 100%;
@@ -74,22 +74,15 @@
         font-size: 10px;
     }
     .backdrop {
-        grid-template-columns: 1fr; 
-        grid-template-rows: auto; 
+        grid-template-columns: minmax(18em, 1fr);
+        grid-template-rows: minmax(0, 0.7fr);
         max-width: 95%;
     }
-
     .backdrop_left {
         justify-self: center;
     }
-    .landing_title{
-        margin-bottom: 1rem;
-    }
     .landing_text{
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        margin-right: 2rem;
-        margin-left: 2rem;
+        align-self: start;
     }
 }