Css for mobile

PTG/src/About.css

@@ -3,7 +3,7 @@
     flex-direction: column;
     align-items: center;
     margin: 0 15vw;
-    min-height: calc(89.5vh - 60px);
+    min-height: calc(93.5vh - 60px);
 }
 
 .footer-pin {
@@ -16,3 +16,9 @@ p {
     text-align: justify;
     margin-bottom: 1rem;
 }
+
+@media screen and (max-width: 600px) {
+    .container{
+        margin: 1rem;
+    }
+}

PTG/src/ChoosePokemon.css

@@ -2,7 +2,8 @@
     field-sizing: content;
     width: fit-content;
     max-width: 100%;
-    margin-left: 1%;
+    margin-left: 1rem;
+
     min-height: 1.5rem;
     border-radius: 0;
     height: 20px;
@@ -14,5 +15,15 @@
     max-width: 100%;
     min-width: 50px;
     margin-left: 1rem;
+    margin-bottom: 5px;
     height: 20px;
 }
+
+@media screen and (max-width: 600px){
+    .chooseName{
+        margin: 5px;
+    }
+    .chooseType{
+        margin: 5px;
+    }
+}

PTG/src/Header.css

@@ -29,8 +29,12 @@ header {
     width: 50%;
 }
 
-@media screen and (max-width: 400px) {
+.websiteName  > h1 {
+    margin: 5px;
+}
+
+@media screen and (max-width: 600px) {
     .websiteName {
-        font-size: small;
+        font-size: x-small;
     }
 }

PTG/src/Team.css

@@ -2,7 +2,8 @@
     background-color: rgb(252, 197, 59);
     border: solid 1px grey;
     border-radius: 5px;
-    margin: 0px 1%;
+    margin-left: 1rem;
+    margin-top: 5px;
 }
 
 .generateTeamButton:hover {
@@ -95,3 +96,9 @@
 .teamCardEmpty {
     color: #999;
 }
+
+@media screen and (max-width: 615px) {
+    .generateTeamButton{
+        margin-left: 5px;
+    }
+}

PTG/src/pokemonTypes.ts

@@ -1,6 +1,6 @@
 // Type data pulled live from PokeAPI, so new types (and the generation
 // that introduces them) show up automatically.
-const TYPE_LIST_URL = "https://pokeapi.co/api/v2/type?limit=100";
+const TYPE_LIST_URL = "https://pokeapi.co/api/v2/type?limit=18";
 const TYPE_URL = (name: string) => `https://pokeapi.co/api/v2/type/${name}`;
 
 // "unknown" (???) and "shadow" are not real battle types you can filter by.