fix: user profile page details responsive for mobile screen

PalisadoesFoundation · Nov 24, 2023 · 3aea7fb · 3aea7fb
1 parent 6023584
commit 3aea7fb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/screens/MemberDetail/MemberDetail.module.css b/src/screens/MemberDetail/MemberDetail.module.css
@@ -109,7 +109,10 @@
 
 .justifysp {
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
+  align-items: flex-start;
+  /* gap : 2px; */
 }
 
 .flexclm {
@@ -126,8 +129,7 @@
   .justifysp {
     padding-left: 55px;
     display: flex;
-    justify-content: space-between;
-    width: 100%;
+    justify-content: space-evenly;
   }
 
   .mainpageright {
@@ -355,12 +357,19 @@
 }
 
 .userImage {
-  width: 200px;
-  height: 200px;
+  width: 180px;
+  height: 180px;
   object-fit: cover;
   border-radius: 8px;
 }
 
+@media only screen and (max-width: 1200px) {
+  .userImage {
+    width: 100px;
+    height: 100px;
+  }
+}
+
 .activeBtn {
   width: 100%;
   display: flex;

diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
@@ -136,7 +136,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
                   <Col sm={6} lg={8}>
                     {/* User section */}
                     <div>
-                      <h2 className="mt-3 mb-4">
+                      <h2>
                         <strong>
                           {userData?.user?.firstName} {userData?.user?.lastName}
                         </strong>