From 393729e0918058b484729612d34ae7a1dc36e3e6 Mon Sep 17 00:00:00 2001
From: DebapriyaJha <111692420+DebapriyaJha@users.noreply.github.com>
Date: Thu, 13 Jun 2024 18:43:13 +0530
Subject: [PATCH 1/2] Made the footer responsive
---
package-lock.json | 8 +++----
src/Components/Footer/Footer.css | 41 +++++++++++++-------------------
2 files changed, 20 insertions(+), 29 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index db019b1..614d0a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19361,9 +19361,9 @@
}
},
"node_modules/typescript": {
- "version": "5.4.5",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
- "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+ "version": "4.9.5",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+ "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
"license": "Apache-2.0",
"peer": true,
"bin": {
@@ -19371,7 +19371,7 @@
"tsserver": "bin/tsserver"
},
"engines": {
- "node": ">=14.17"
+ "node": ">=4.2.0"
}
},
"node_modules/unbox-primitive": {
diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css
index 89233ec..c9da56b 100644
--- a/src/Components/Footer/Footer.css
+++ b/src/Components/Footer/Footer.css
@@ -6,10 +6,7 @@
.footer-container {
display: flex;
-}
-
-.footer-container-md {
- display: flex;
+ flex-wrap: wrap;
justify-content: space-between;
}
@@ -26,6 +23,7 @@
.footer-half {
width: 60%;
display: flex;
+ flex-wrap: wrap;
justify-content: space-evenly;
}
@@ -56,7 +54,7 @@
cursor: pointer;
}
-.footer-link a{
+.footer-link a {
text-decoration: none;
color: white;
}
@@ -64,9 +62,7 @@
.footer-icons {
display: flex;
gap: 1rem;
- justify-content: center;
margin-top: 1rem;
- margin-right: 7rem;
font-size: x-large;
}
@@ -84,7 +80,7 @@
}
.footer-icons-md {
- justify-content: flex-end;
+ justify-content: flex-start;
}
.footer-bottom {
@@ -101,6 +97,7 @@
.footer-sections {
display: flex;
+ flex-wrap: wrap;
}
.profileContainer a {
@@ -129,22 +126,17 @@
}
.footer-2 {
- width: 20%;
+ width: 45%;
+ margin-bottom: 2rem;
}
.footer-icons {
- margin-right: 5rem;
- justify-content: flex-end;
- }
-
- .footer-bottom {
- justify-content: space-between;
+ margin-right: 0;
+ justify-content: flex-start;
}
.footer-bottom {
- display: flex;
- margin-top: 10px;
- justify-content: left;
+ justify-content: center;
}
}
@@ -159,14 +151,13 @@
}
.footer-icons {
- margin-right: 0;
- display: flex;
justify-content: center;
}
+}
- .footer-bottom {
- display: flex;
- margin-top: 10px;
- justify-content: center;
+@media (min-width: 769px) {
+ .footer-icons {
+ justify-content: flex-start;
+ margin-right: 0;
}
-}
+}
\ No newline at end of file
From 708cdf7a21127e4113a99c6f323ee98071501c26 Mon Sep 17 00:00:00 2001
From: DebapriyaJha <111692420+DebapriyaJha@users.noreply.github.com>
Date: Sat, 15 Jun 2024 21:28:34 +0530
Subject: [PATCH 2/2] Solved Footer Responsiveness Issue
---
src/Components/Footer/Footer.css | 19 ++++++++++++++-
src/Components/Footer/Footer.jsx | 42 ++++++++++++++++----------------
2 files changed, 39 insertions(+), 22 deletions(-)
diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css
index c9da56b..4d75788 100644
--- a/src/Components/Footer/Footer.css
+++ b/src/Components/Footer/Footer.css
@@ -155,7 +155,24 @@
}
}
-@media (min-width: 769px) {
+@media (min-width: 769px) and (max-width: 990px) {
+ .footer-half {
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ }
+
+ .footer-2 {
+ width: 45%;
+ margin-bottom: 2rem;
+ }
+
+ .footer-icons {
+ justify-content: flex-start;
+ margin-right: 0;
+ }
+}
+
+@media (min-width: 991px) {
.footer-icons {
justify-content: flex-start;
margin-right: 0;
diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
index 84c1671..a9b10c6 100644
--- a/src/Components/Footer/Footer.jsx
+++ b/src/Components/Footer/Footer.jsx
@@ -68,27 +68,27 @@ const Footer = () => {
Career
-
-
+
+