Fix mobile responsiveness issues

Author: jebalert

README.md

@@ -26,7 +26,7 @@ Visit the live site at: [https://jebalert.github.io/pi-tribute/](https://jebaler
 
 1. Clone the repository:
 ```bash
-git clone https://github.com/jbenfante/pi-tribute.git
+git clone https://github.com/jebalert/pi-tribute.git
 cd pi-tribute
 ```
 

src/App.css

@@ -1,8 +1,10 @@
 #root {
+  width: 100%;
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem;
   text-align: center;
+  box-sizing: border-box;
 }
 
 .logo {
@@ -34,9 +36,45 @@
 }
 
 .card {
-  padding: 2em;
+  padding: 1em;
 }
 
 .read-the-docs {
   color: #888;
 }
+
+/* Mobile Responsive Styles */
+@media screen and (max-width: 768px) {
+  #root {
+    padding: 0.5rem;
+  }
+
+  .card {
+    padding: 0.5em;
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  .logo {
+    height: 4em;
+    padding: 1em;
+  }
+}
+
+/* Small Mobile Devices */
+@media screen and (max-width: 480px) {
+  #root {
+    padding: 0.25rem;
+  }
+
+  h1 {
+    font-size: 1.5em;
+  }
+
+  .logo {
+    height: 3em;
+    padding: 0.75em;
+  }
+}

src/index.css

@@ -24,15 +24,16 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  width: 100%;
+  overflow-x: hidden;
 }
 
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
+  margin: 0.5em 0;
 }
 
 button {
@@ -66,3 +67,35 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+/* Mobile Responsive Styles */
+@media screen and (max-width: 768px) {
+  body {
+    font-size: 14px;
+  }
+
+  h1 {
+    font-size: 2.5em;
+  }
+
+  button {
+    padding: 0.5em 1em;
+    font-size: 0.9em;
+  }
+}
+
+/* Small Mobile Devices */
+@media screen and (max-width: 480px) {
+  body {
+    font-size: 12px;
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  button {
+    padding: 0.4em 0.8em;
+    font-size: 0.8em;
+  }
+}