🍀 Refactoring dashboard contact us component (#951)

* Contact Us Card Problem Solve ! * align item to center * Update Contact.jsx * Update Contact.jsx
HITK-TECH-Community · May 25, 2024 · 06f3d47 · 06f3d47
1 parent f0a7bd7
commit 06f3d47
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/frontend/src/pages/Admin/Components/Contact/Card/card.module.scss b/frontend/src/pages/Admin/Components/Contact/Card/card.module.scss
@@ -91,3 +91,10 @@
 .button-delete:hover {
   background-color: #fc3779;
 }
+
+@media (max-width: 441px) {
+  .card-item {
+    width: 70vw;
+    margin: 0.5em 1em 1em 1.5em;
+  }
+}
diff --git a/frontend/src/pages/Admin/Components/Contact/Contact.jsx b/frontend/src/pages/Admin/Components/Contact/Contact.jsx
@@ -88,8 +88,8 @@ export function Contact() {
       <h1 style={{ textAlign: "center" }}> Contact Us </h1>
       {isLoaded ? <div className={style["data-loader"]}><Loader /></div>:
       <div className={style["card-container"]}>
-        <Grid container spacing={2}>
-          <Grid item>
+        <Grid container spacing={2} >
+          <Grid item container alignItems="center" justifyContent="center">
             {contactUsData &&
               contactUsData.map((data) => {
                 return <Card key={data._id} id={data._id} handleDelete={handleDelete} content={data} />;