fix ui

src/pages/Volunteers/VolunteersPage.module.css

@@ -1,125 +1,113 @@
 .container {
-  width: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  margin-top: 50px;
+    width: 100%;
+    padding: 10px;
+    margin-top: 50px;
+    box-sizing: border-box;
 }
 
 .profileboard {
-  width: 100%;
-  padding: 15px;
-  border-radius: 10px;
-  box-sizing: border-box;
-  margin-top: 3%;
-  position: relative;
+    width: 100%;
+    padding: 15px;
+    margin-top: 3%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    box-sizing: border-box;
 }
 
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.header h2 {
+    margin: 0;
+}
+
+
 .mainContent {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 100%;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    flex: 1;
 }
 
 .basicInfo {
-  flex: 1;
+    flex: 1;
 }
 
 .expandedContent {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-}
-
-.profilePictureContainer {
-  width: 120px;
-  height: 120px;
-  margin-right: 20px;
-}
-
-.profilePicture {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  object-fit: cover;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
 }
 
 .textInfo {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
 }
 
 .contactInfo {
-  margin-top: 10px;
+    margin-top: 10px;
 }
 
 .contactInfo p {
-  margin: 5px 0;
+    margin: 5px 0;
+}
+
+.bottomBar {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.profilePictureContainer {
+    width: 120px;
+    height: 120px;
+    margin-right: 20px;
+}
+
+.profilePicture {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
 }
 
 .expandButton {
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  font-size: 16px;
-  margin-left: 10px;
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
-
-.voirPlus {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  color: #007bff;
-  text-decoration: none;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.voirPlus:hover {
-  text-decoration: underline;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    font-size: 16px;
 }
 
 @media screen and (min-width: 768px) {
-  .profilePictureContainer {
-    width: 150px;
-    height: 150px;
-  }
-  .voirPlus{
-    text-align: right;
-  }
+    .profilePictureContainer {
+        width: 150px;
+        height: 150px;
+    }
 }
 
 @media screen and (min-width: 1024px) {
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-    margin-top:50px;
-    margin-bottom: 50px;
-  }
+    .container {
+        max-width: 1200px;
+        margin: 50px auto;
+        padding: 20px;
+    }
 
-  .profileboard {
-    padding: 25px;
-  }
+    .profileboard {
+        padding: 25px;
+    }
 
-  .profilePictureContainer {
-    width: 200px;
-    height: auto;
-  }
+    .profilePictureContainer {
+        width: 200px;
+        height: auto;
+    }
 }
-
-
-
-
-