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

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 27, 2023 · d576f63 · d576f63
1 parent 1bab94f
commit d576f63
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 13 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

diff --git a/src/App.css b/src/App.css
@@ -36,3 +36,7 @@
     transform: rotate(360deg);
   }
 }
+
+body {
+  overflow: hidden; /* Prevent scrolling */
+}
diff --git a/...cter has an oval-shaped face, dark hair, glasses, and is dressed in a moder.png b/...cter has an oval-shaped face, dark hair, glasses, and is dressed in a moder.png
diff --git a/src/HeaderBar.css b/src/HeaderBar.css
@@ -2,7 +2,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: black;
+    background-color: #010206;
     padding: 0.5rem 2rem;
     color: white;
     height: 50px;

diff --git a/src/HeroSection.css b/src/HeroSection.css
@@ -3,19 +3,19 @@
     justify-content: space-between;
     align-items: center;
     height: 100vh;
-    background-color: black; /* Set the background to black */
+    background-color: #010206; /* Set the background to black */
     color: white;
     text-align: left;
   }
 
   .hero-content {
-    width: 50%;
+    width: 50vw;
     padding-left: 10%;
-    max-width: 600px; /* Set a max-width if needed */
+    max-width: 600px; 
   }
 
   .hero-greeting {
-    font-size: 2rem; /* Smaller font size for the greeting */
+    font-size: 2rem; 
     margin: 0 0 0.5rem 0;
   }
 
@@ -60,16 +60,14 @@
   }
 
   .hero-image-container {
-    width: 50%;
-    height: 100%;
-    display: flex;
+    width: 50vw;
+    height: 100vh;
     justify-content: center;
     align-items: center;
   }
 
   .hero-image {
-    max-width: 100%; /* Adjust the size as needed */
-    max-height: 100%;
-    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25); /* Example shadow */
-    border-radius: 10px; /* If you want rounded corners */
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
   }