fix: Resolve responsive layout issues on homepage (#11)

Adjusted CSS media queries and flexbox/grid properties to improve the responsiveness of the homepage layout. This includes fixing overlapping text and images on smaller screens, aligning sections properly across different devices, and ensuring interactive elements are accessible and visible on all screen sizes. Tested across various devices to ensure a seamless user experience.
DizzyZff · Nov 26, 2023 · 1bab94f · 1bab94f
1 parent 7d7a505
commit 1bab94f
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 6 deletions.
diff --git a/src/App.css b/src/App.css
@@ -36,7 +36,3 @@
     transform: rotate(360deg);
   }
 }
-
-body {
-  overflow: hidden; /* Prevent scrolling */
-}
diff --git a/src/HeaderBar.css b/src/HeaderBar.css
@@ -5,7 +5,7 @@
     background-color: black;
     padding: 0.5rem 2rem;
     color: white;
-    height: 5vh;
+    height: 50px;
   }
 
   .brand-name {

diff --git a/src/HeroSection.css b/src/HeroSection.css
@@ -2,7 +2,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 95vh;
+    height: 100vh;
     background-color: black; /* Set the background to black */
     color: white;
     text-align: left;
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,3 @@ @@
         transform: rotate(360deg);
       }
     }
-    body {
-      overflow: hidden; /* Prevent scrolling */
-    }