Merge pull request #213 from AmanPathan/new-branch

[Fix]: makes website mobile-responsive
Vin205 · Oct 12, 2024 · b821252 · b821252
2 parents 8f9d944 + f970013
commit b821252
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 2 deletions.
diff --git 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%;
+  }
+}
diff --git 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;
+  }
 }