Merge pull request #136 from sakshamsharma/mobile-view-stack

Fix mobile view of the homepage: vertically stack logo

Author: neatudarius

src/pages/index.module.css

@@ -26,13 +26,20 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px; /* Adjust the space between images and text */
+  gap: 10px;
 }
 
-.taglineImage {
-  height: 50px; /* Reduce the height of the images */
-  width: auto; /* Ensure the width adjusts automatically to maintain the aspect ratio */
-  object-fit: contain; /* Maintain aspect ratio of the SVGs */
+.leftLogo,
+.rightLogo {
+  width: 400px;
+  height: 400px;
+  object-fit: contain;
+}
+
+.taglineText {
+  display: inline-block;
+  max-width: 32rem;
+  line-height: 1.35;
 }
 
 .hero__subtitle {
@@ -42,3 +49,23 @@
   text-align: center;
   margin-top: 10px;
 }
+
+@media screen and (max-width: 996px) {
+  .taglineContainer {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .rightLogo {
+    display: none;
+  }
+
+  .leftLogo {
+    width: min(70vw, 260px);
+    height: auto;
+  }
+
+  .taglineText {
+    max-width: 18rem;
+  }
+}

src/pages/index.tsx

@@ -22,14 +22,14 @@ function HomepageHeader() {
               /* TODO: check if we can use SVG images*/
               src="./img/beman_logo.png"
               alt="Left Logo"
-              style={{ width: "400px", height: "400px" }}
+              className={styles.leftLogo}
             />
-            <span>{siteConfig.tagline}</span>
+            <span className={styles.taglineText}>{siteConfig.tagline}</span>
             <img
               /* TODO: check if we can use SVG images*/
               src="./img/beman_logo_reversed.png"
               alt="Right Logo"
-              style={{ width: "400px", height: "400px" }}
+              className={styles.rightLogo}
             />
           </div>
         </div>