rectified all the css error except about page

src/App.js

@@ -1,37 +1,32 @@
-import React, { useEffect, useState, createContext } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
-import "./App.css";
-import "./responsive.css";
-import { Routes, Route, HashRouter } from "react-router-dom";
 import {
   getDatabase,
-  ref,
   onValue,
-  set,
-  push,
-  child,
-  remove,
+  ref
 } from "firebase/database";
-import Header from "./components/header/header";
+import React, { createContext, useEffect, useState } from "react";
+import { HashRouter, Route, Routes } from "react-router-dom";
+import "./App.css";
+import Loader from "./assets/images/loading.gif";
 import Footer from "./components/footer/footer";
+import Header from "./components/header/header";
+import About from "./pages/About";
+import AddProductForm from "./pages/AddProd";
+import DetailsPage from "./pages/Details";
 import Home from "./pages/Home/index";
-import About from "./pages/About/index";
 import Listing from "./pages/Listing";
 import NotFound from "./pages/NotFound";
-import DetailsPage from "./pages/Details";
-import axios from "axios";
-import Cart from "./pages/cart";
-import Wishlist from "./pages/wishList";
 import SignIn from "./pages/SignIn";
 import SignUp from "./pages/SignUp";
-import Loader from "./assets/images/loading.gif";
-import AddProductForm from "./pages/AddProd";
+import Cart from "./pages/cart";
+import Wishlist from "./pages/wishList";
+import "./responsive.css";
 
 // import data from './data';
+import { collection, doc, getDocs } from "firebase/firestore";
 import MapComponent from "./components/map/ITEMmap";
-import SellerForm from "./pages/SellerRegistration";
 import { db } from "./firebase";
-import { collection, doc, getDocs } from "firebase/firestore";
+import SellerForm from "./pages/SellerRegistration";
 
 const MyContext = createContext();
 
@@ -302,3 +297,4 @@ function App() {
 export default App;
 
 export { MyContext };
+

src/pages/About/about.css

@@ -0,0 +1,166 @@
+.about-container * {
+  text-decoration: none;
+  list-style: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.about-container {
+  width: 100%;
+  height: 100%;
+  margin-bottom: 2vw;
+  padding-top: 2vw;
+  overflow: hidden;
+}
+
+.about-container > .contributor-text {
+  text-transform: capitalize;
+  font-size: 40px;
+  color: #008080;
+  font-weight: 500;
+  margin-bottom: 30px;
+}
+
+.about-container > .container-grid {
+  padding-top: 1vw;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+}
+
+.container-grid > .MuiGrid-item-root {
+  display: flex;
+  justify-content: center;
+}
+
+.container-grid > .MuiGrid-item-root > .card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+  border: 0.5px solid #008080;
+  transition: box-shadow 1s;
+}
+
+.container-grid > .MuiGrid-item-root > .card:hover {
+  box-shadow: 10px 10px #008080;
+}
+
+.container-grid > .MuiGrid-item-root > .card > .cardLink > .img {
+  padding: 10px;
+  border-radius: 50%;
+  width: 150px;
+  height: 150px;
+  background-size: cover !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  object-fit: cover !important;
+}
+
+.container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-name {
+  font-size: 20px;
+  color: #008080;
+  text-align: center;
+}
+
+.container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .text-color {
+  font-size: 1.2vw;
+  color: #008080;
+}
+
+.container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .temp {
+  margin-left: 5px;
+  margin-right: 5px;
+  font-size: 30px;
+  color: #008080;
+}
+
+@media (max-width: 586px) {
+  .about-container {
+    width: 100%;
+    height: 100%;
+    padding: 5vw;
+  }
+
+  .about-container > .contributor-text {
+    text-align: center;
+    justify-content: center;
+    margin: auto;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .text-color {
+    font-size: 20px;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card {
+    width: 100%;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card > .cardLink > .img {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+@media (min-width: 600px) {
+  .about-container {
+    width: 100%;
+    height: 50%;
+    padding: 5vw;
+  }
+
+  .about-container > .contributor-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 50px;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .text-color {
+    font-size: 24px;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card {
+    width: 300px;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card > .cardLink > .img {
+    width: 150px;
+    height: 150px;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 1024px) {
+  .about-container {
+    width: 100%;
+    height: 100%;
+    padding: 3vw;
+    margin-top: 3.5vw;
+  }
+
+  .about-container > .contributor-text {
+    font-size: 40px;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .text-color {
+    font-size: 20px;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card {
+    width: 300px;
+    height: 50%;
+  }
+
+  .container-grid > .MuiGrid-item-root > .card > .cardLink > .img {
+    width: 120px;
+    height: 120px;
+  }
+}

src/pages/About/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import "./style.css";
+import "./about.css";
 import axios from "axios";
 import { Card, CardContent, CardMedia, Grid, Typography } from "@mui/material";
 
@@ -28,46 +28,26 @@ function Tes() {
         {contributors.map((contributor) => (
           <Grid item key={contributor.id}>
             <Card className="card">
-              {window.innerWidth < 580 ? (
-                <div className="img">
-                  <a
-                    href={contributor.html_url}
-                    className="cardLink"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <CardMedia
-                      component="img"
-                      image={contributor.avatar_url}
-                      alt={contributor.login}
-                      className="img"
-                    />
-                  </a>
-                </div>
-              ) : (
-                <div className="img">
-                <a
-                  href={contributor.html_url}
-                  className="cardLink"
-                  target="_blank"
-                  rel="noreferrer"
-                >
+              <a
+                href={contributor.html_url}
+                className="cardLink"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <CardMedia
                   component="img"
                   image={contributor.avatar_url}
                   alt={contributor.login}
                   className="img"
                 />
-                </a>
-                </div>
-              )}
+              </a>
               <CardContent>
                 <Typography className="card-name" variant="h4">
                   {contributor.login}
                 </Typography>
               </CardContent>
-              <CardContent>
-                <Typography className="card-bottom">
+              <CardContent className="card-bottom">
+                <Typography className="text-color">
                   <a
                     href={contributor.html_url}
                     target="_blank"
@@ -83,7 +63,7 @@ function Tes() {
                     rel="noopener noreferrer"
                     className="text-color"
                   >
-                    Contributions : {contributor.contributions}
+                    Contributions: {contributor.contributions}
                   </a>
                 </Typography>
               </CardContent>
@@ -95,4 +75,4 @@ function Tes() {
   );
 }
 
-export default Tes;
+export default Tes;