Make hero section responsible for mobile screen width

estuary · Oct 24, 2024 · 6306144 · 6306144
1 parent 289c016
commit 6306144
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/src/components/DeploymentOptionsPage/Hero/index.tsx b/src/components/DeploymentOptionsPage/Hero/index.tsx
@@ -35,15 +35,13 @@ const Hero = () => {
                         </LinkOutlined>
                     </div>
                 </div>
-                <div>
-                    <StaticImage
-                        src="../../../images/deployment-options-page/deployment-options-meta-image.png"
-                        alt="Enterprise-ready Estuary Flow deployment options: BYOC, Public, and Private"
-                        quality={100}
-                        placeholder="blurred"
-                        loading="eager"
-                    />
-                </div>
+                <StaticImage
+                    src="../../../images/deployment-options-page/deployment-options-meta-image.png"
+                    alt="Enterprise-ready Estuary Flow deployment options: BYOC, Public, and Private"
+                    quality={100}
+                    placeholder="blurred"
+                    loading="eager"
+                />
             </div>
         </section>
     );

diff --git a/src/components/DeploymentOptionsPage/Hero/styles.module.less b/src/components/DeploymentOptionsPage/Hero/styles.module.less
@@ -31,8 +31,33 @@
     margin: 0;
   }
 
-  img {
-    min-width: 536px;
+  div {
+    max-width: 50%;
+    width: 100%;
+  }
+
+  @media (max-width: 1024px) {
+    div {
+      max-width: 100%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    h1 {
+      font-size: 2.5rem;
+      line-height: 48px;
+    }
+
+    p {
+      font-size: 1rem;
+    }
+  }
+
+  @media (max-width: 425px) {
+    h1 {
+      font-size: 2.25rem;
+      line-height: 43.2px;
+    }
   }
 }
 
@@ -60,4 +85,4 @@
       flex-direction: column;
     }
   }
-}
+}