Fix footer position

PTG/src/About.css

@@ -3,6 +3,13 @@
     flex-direction: column;
     align-items: center;
     margin: 0 15vw;
+    min-height: calc(89.5vh - 60px);
+}
+
+.footer-pin{
+    position: relative;
+    bottom: 0;
+    left: 0;
 }
 
 p{

PTG/src/About.tsx

@@ -1,4 +1,5 @@
 import Header from "./Header.tsx";
+import Footer from "./Footer.tsx";
 import "./About.css";
 
 export default function About(){
@@ -18,11 +19,14 @@ export default function About(){
                 <p>
                     This website is made by students, and is made for training reasons,
                     also for lazy people not wanting to pick a team themselves. Contact information
-                    can be found at the footer of the home page. Any feedback will be deeply appreciated,
+                    can be found at the footer of the home page and this page. Any feedback will be deeply appreciated,
                     as it will be used as a tool to sharpen our skills and improve our work in the
                     second project.
                 </p>
             </div>
+            <div className="footer-pin">
+                <Footer />
+            </div>
         </>
     );
-}
+}

PTG/src/App.css

@@ -0,0 +1,9 @@
+.content{
+    min-height: calc(100vh - 60px);
+}
+
+.footer-pin{
+    position: relative;
+    bottom: 0;
+    left: 0;
+}

PTG/src/App.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import Header from "./Header.tsx"
 import Footer from "./Footer.tsx"
+import "./App.css"
 import ChoosePokemon from "./ChoosePokemon.tsx";
 import Team from "./Team.tsx";
 import PokemonGrid from "./PokemonGrid.tsx";
@@ -20,25 +21,29 @@ export default function App(){
 
 	return(
 		<div>
-			<Header />
-			<ChoosePokemon
-				selectedGame={selectedGame}
-				selectedType={selectedType}
-				selectedName={selectedName}
-				onGameChange={setSelectedGame}
-				onTypeChange={setSelectedType}
-				onNameChange={setSelectedName}
-			/>
-			<Team
-				team={team}
-				pokemonById={pokemonById}
-				typeMap={typeMap}
-				allFavourited={allFavourited}
-				generateTeam={generateTeam}
-				toggleFavourite={toggleFavourite}
-			/>
-			<PokemonGrid selectedGame={selectedGame} selectedType={selectedType} selectedName={selectedName} />
-			<Footer/>
+			<div className="content">
+				<Header />
+				<ChoosePokemon
+					selectedGame={selectedGame}
+					selectedType={selectedType}
+					selectedName={selectedName}
+					onGameChange={setSelectedGame}
+					onTypeChange={setSelectedType}
+					onNameChange={setSelectedName}
+				/>
+				<Team
+					team={team}
+					pokemonById={pokemonById}
+					typeMap={typeMap}
+					allFavourited={allFavourited}
+					generateTeam={generateTeam}
+					toggleFavourite={toggleFavourite}
+				/>
+				<PokemonGrid selectedGame={selectedGame} selectedType={selectedType} selectedName={selectedName} />
+			</div>
+			<div className="footer-pin">
+				<Footer/>
+			</div>
 		</div>
 
 	);