socials ultrawide fix

src/styles/Socials.css

@@ -1,43 +1,44 @@
 .social {
   background-color: gray;
   width: 100%;
-    height: auto;
+  height: 90svh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  }
+}
 
-  .social .socialTitle {
+.social .socialTitle {
   font-family: sans-serif, Arial;
   font-size: 60px;
-  }
+}
 
-  .socialList {
+.socialList {
   width: 70vw;
   height: auto;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   place-items: center;
-  }
+}
 
-  /* social ITEM STYLING */
+/* social ITEM STYLING */
 
-  .socialItem {
+.socialItem {
   background-color: lightgray;
   border-radius: 15px;
   width: 300px;
   height: 350px;
   margin: 20px;
   box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-  }
-  .socialItem:hover {
+}
+
+.socialItem:hover {
   box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.5);
   transition: 0.3s ease-in;
   cursor: pointer;
-  }
+}
 
-  .socialItem div {
+.socialItem div {
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   width: 100%;
@@ -45,28 +46,28 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  }
+}
 
-  .socialItem a {
+.socialItem a {
   text-decoration: none;
   color: black;
   margin: 20px;
   font-size: 20px;
-  }
+}
 
-  .socialItem h1, 
-  .socialItem p {
+.socialItem h1,
+.socialItem p {
   margin-left: 20px;
-  }
+}
 
-  @media only screen and (max-width: 1300px) {
+@media only screen and (max-width: 1300px) {
   .socialList {
     grid-template-columns: 1fr 1fr;
   }
-  }
+}
 
-  @media only screen and (max-width: 800px) {
+@media only screen and (max-width: 800px) {
   .socialList {
     grid-template-columns: 1fr;
   }
-  }
+}