From f97001359ee35f76a5614f6f96d6bef37bd6cc31 Mon Sep 17 00:00:00 2001
From: AmanPathan <amanpathan526@gmail.com>
Date: Sat, 12 Oct 2024 00:52:22 +0530
Subject: [PATCH] mobile-responsive code

---
 frontend/src/components/Footer/footer.css | 49 ++++++++++++++++++++++-
 frontend/src/pages/Home/Hom.css           | 15 +++++++
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Footer/footer.css b/frontend/src/components/Footer/footer.css
index 066c16b..db7c29a 100644
--- a/frontend/src/components/Footer/footer.css
+++ b/frontend/src/components/Footer/footer.css
@@ -203,6 +203,29 @@ hr {
 }
 
 /* Media Queries for Footer */
+@media (max-width: 1024px) {
+.footer-buttons {
+  display: flex;
+  justify-content: space-between;
+  width: 90%;
+}
+.btn{
+  min-width: 160px;
+  padding: 10px 25px;
+}
+}
+@media (max-width: 934px) {
+  .btn{
+    min-width: 120px;
+  }
+}
+@media (max-width: 800px) {
+  .btn{
+    min-width: 100px;
+    font-size: 14px;
+    padding: 10px;
+  }
+}
 @media (max-width: 768px) {
   .footer-content {
     flex-direction: column;
@@ -215,8 +238,13 @@ hr {
   }
 
   .footer-buttons {
-    flex-direction: column;
-    gap: 10px;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .btn{
+    min-width: 140px;
+    padding: 14px;
   }
 
   .footer-title {
@@ -231,3 +259,20 @@ hr {
     font-size: 12px;
   }
 }
+@media (max-width: 620px) {
+  .footer-buttons {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .btn{
+    min-width: 160px;
+  }
+  .footer-socials{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Home/Hom.css b/frontend/src/pages/Home/Hom.css
index cec31b5..5dc00e8 100644
--- a/frontend/src/pages/Home/Hom.css
+++ b/frontend/src/pages/Home/Hom.css
@@ -214,4 +214,19 @@ body, html {
   .card-grid {
     grid-template-columns: 1fr; /* Stack cards vertically */
   }
+}
+@media (max-width: 443px) {
+  .intro-text{
+    padding: 20px;
+  }
+}
+@media (max-width: 382px) {
+  .title{
+    font-size: 45px !important;
+  }
+}
+@media (max-width: 321px) {
+  .title{
+    font-size: 40px !important;
+  }
 }
\ No newline at end of file