Merge pull request #6596 from vr-varad/fix/profile-single-fix

Fix: Single Profile Section Fix

Author: vr-varad

src/sections/Community/Member-single/index.js

@@ -46,7 +46,7 @@ const MemberSingle = ({ frontmatter }) => {
     <MemberSingleWrapper>
       <Container>
         <div>
-          <Row>
+          <Row className="profile-header" >
             <Col xs={12} sm={12} lg={6}>
               <div className="backBtn">
                 <Link to="/community/members">
@@ -59,8 +59,8 @@ const MemberSingle = ({ frontmatter }) => {
               <h1 className="page-heading">Layer5 Community Member</h1>
             </Col>
           </Row>
-          <Row>
-            <Col $xs={12} $sm={12} $lg={6}>
+          <Row className="member-details">
+            <Col $xs={12} $sm={12} $lg={6} className="profile-image-col">
               <Image
                 className={
                   status.includes("Inactive")
@@ -77,7 +77,7 @@ const MemberSingle = ({ frontmatter }) => {
                 <div className="name">{name}</div>
                 {position && <div className="position">{position}</div>}
               </div>
-              <div className="body">
+              <div className="info-body">
                 {location && (
                   <div className="text location">
                     <span className="bold">{location}</span>

src/sections/Community/Member-single/memberSingle.style.js

@@ -2,12 +2,27 @@ import styled from "styled-components";
 
 export const MemberSingleWrapper = styled.div`
   margin: 4.5rem 0 3.125rem 0;
+
+  @media screen and (max-width: 62.5rem) {
+    margin: 1rem 0 3.125rem 0;
+
+    .profile-header {
+      flex-direction: column;
+      margin-bottom: 1.5rem;
+    }
+
+    .profile-image-col {
+      text-align: center;
+    }
+
+    .member-details {
+      flex-wrap: wrap;
+    }
+  }
+
   .backBtn {
     font-weight: 600;
     margin-bottom: 1rem;
-    @media screen and (max-width: 62rem) {
-      display: none;
-    }
     a {
       display: flex;
       color: ${(props) => props.theme.primaryColor};
@@ -32,6 +47,10 @@ export const MemberSingleWrapper = styled.div`
     color: ${(props) => props.theme.primaryColor};
     text-align: left;
     font-weight: 400;
+
+    @media screen and (max-width: 62.5rem) {
+      text-align: center;
+    }
   }
   ul {
     list-style: none;
@@ -41,7 +60,7 @@ export const MemberSingleWrapper = styled.div`
     transition: 0.9s;
   }
 
-  .body {
+  .info-body {
     display: block;
     position: relative;
     text-align: center;