Merge pull request #110 from RbAvci/Bug/Overlapping-footer-3

#99 footer bug resolved - Fikret Ellek

client/src/components/AppHeader/AppHeader.css

@@ -1,7 +1,4 @@
 .header {
-  position: fixed; 
-  top: 0;
-  left: 0;
   width: 100%; 
   display: flex;
   justify-content: space-between;

client/src/components/Contribution/contribution.css

@@ -9,8 +9,6 @@
 	height: 100%;
 	box-sizing: border-box;
 	grid-area: con;
-	margin-bottom: 80px;
-	margin-top: 2%;
 }
 
 .activity-table table {

client/src/components/Footer/Footer.css

@@ -9,9 +9,6 @@
   padding: 10px 20px;
   box-sizing: border-box;
   font-family: Raleway, Arial;
-  position: fixed;
-  bottom: 0;
-  left: 0;
 }
 
 .footer-content {

client/src/components/Info/info.css

@@ -9,31 +9,25 @@ body {
 .front-container {
 	display: flex;
 	flex-direction: column;
-	align-items: center;
+	align-items: flex-start;
 	justify-content: center;
 	padding: 20px;
 	position: relative;
-	height: 90vh;
-	margin: 20px;
 	background-image: url("https://cdni.iconscout.com/illustration/premium/thumb/cute-panda-working-on-laptop-illustration-download-in-svg-png-gif-file-formats--business-illustrations-3535311.png?f=webp");
-	background-size: 35% 60%;
+	background-size: 30% auto;
 	background-position: right center;
 	background-repeat: no-repeat;
 }
 
 .cyf-img {
-	width: 15%;
-	position: relative;
-	left: 97%;
-	top: 25%;
+	width: 10%;
+    position: absolute;
+    right: calc(18% - 5px);
+    top: calc(52% - 30px);
 }
 
 .background-overlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 70%;
-	height: 100%;
+	width: 63%;
 	background: linear-gradient(to right, #dedede 70%, transparent 100%);
 	z-index: 1;
 }

client/src/components/Profile/Profile.css

@@ -1,17 +1,15 @@
 .profile-container {
+	flex: 1;
 	background-color: #e3e3e3;
 	display: grid;
 	grid-template-columns: 1fr 1fr;
-	grid-template-rows: 1fr 1fr 1fr;
+	grid-template-rows: auto;
 	grid-template-areas:
 		"myAv myAv"
 		"readme mypr"
 		"con con";
-	grid-gap: 10px;
-	padding: 10px;
+	grid-gap: 20px 10px;
+	padding: 20px 10px;
 	width: 100%;
-	height: 100vh;
 	box-sizing: border-box;
-	position: relative;
-	top: 100px;
 }

client/src/index.css

@@ -0,0 +1,6 @@
+#root{
+    min-height: 100dvh;
+	display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}

client/src/index.js

@@ -1,6 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
-
+import "./index.css";
 import App from "./App";
 
 createRoot(document.getElementById("root")).render(

client/src/pages/FormStyles.css

@@ -89,8 +89,9 @@
 
 /* General styling for form containers */
 .signUpCard, .updatePasswordForm-container, .signInCard {
+    width: 80%;
     max-width: 400px;
-    margin: 100px auto;
+    margin: 0px auto;
     padding: 20px;
     background-color: #ffffff; /* Clean white background */
     border-radius: 8px; /* Rounded corners */

client/src/pages/Home.css

@@ -1,9 +1,9 @@
 main {
+	flex: 1;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	min-height: calc(100vh - 80px);
 	background-color: #ffffff;
 	font-family: Arial, sans-serif;
 	color: #333333;
@@ -15,7 +15,6 @@ main > div {
 }
 
 .main_page_logo {
-	padding-top: 80px;
 	height: 50dvh;
 	min-height: 300px;
 	width: auto;

client/src/pages/SignOut.css

@@ -1,9 +1,9 @@
 .signOut {
+  flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100vh;
     background-color: #f0f0f0;
     font-family: Arial, sans-serif;
 }