fix: Buttons overlap and overflow in mobile view (enhance buttons and…

README.md

@@ -83,7 +83,11 @@ cd developerFolio
 cp env.example .env
 # For Windows
 copy env.example .env
+```
+
+NOTE: You must configure environment variables before running your portfolio, as certain components rely on API data. Failure to do so will result in a 401 Unauthorized error.
 
+```bash
 # Install dependencies
 npm install
 

src/components/button/Button.scss

@@ -38,10 +38,21 @@
     font-size: 0.938rem;
     padding: 12px 18px;
     margin-right: 0px;
+    width: 100%;
+    margin: 10px auto;
+  }
+}
+@media (max-width: 480px) {
+  .main-button {
+    font-size: 0.875rem;
+    width: 90%;
+    padding: 10px 15px;
   }
 }
 @media (max-width: 320px) {
   .main-button {
     font-size: 0.75rem;
+    width: 95%;
+    padding: 8px 12px;
   }
 }

src/containers/greeting/Greeting.scss

@@ -40,6 +40,9 @@
 }
 .download-link-button {
   text-decoration: none;
+  width: 100%;
+  display: flex;
+  justify-content: center;
 }
 
 .greeting-text {
@@ -102,6 +105,8 @@
 @media (max-width: 768px) {
   .button-greeting-div {
     justify-content: space-around;
+    flex-direction: column;
+    align-items: center;
   }
   .greeting-text {
     font-size: 30px;