Merge branch 'master' into fix_dropdown_functionality

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;

src/sections/General/Navigation/index.js

@@ -326,7 +326,7 @@ const Navigation = () => {
                                       changeDropdownState();
                                       closeDropDown();
                                     }}
-                                    className="mobile-sub-menu-item"
+                                    className={subItems.sepLine ? "mobile-sub-menu-item" : "mobile-nested-menu"}
                                     activeClassName="nav-link-active"
                                   >
                                     {subItems.name}

src/sections/General/Navigation/navigation.style.js

@@ -648,6 +648,10 @@ const NavigationWrap = styled.header`
     .mobile-sub-menu-item {
       font-size: 1.1rem;
     }
+    .mobile-nested-menu {
+       font-size: 1.1rem;
+       margin-left: 1rem;
+    }
   }
 
   .nav-link-active {