Account Settings Mobile and Tab Responsive Fix

Author: lazycipher

src/user/dashboard/settings/Settings.js

@@ -12,14 +12,14 @@ class Settings extends Component {
   }
   render() {
     return (
-      <div className="settings">
-        <div className="navigation">
-            <Navigation settings={this.state.settings}></Navigation>
+      <>
+          <Navigation settings={this.state.settings}></Navigation>
+          <div className="settings">
+            <div className="settings__content">
+              <SettingContent />
+            </div>
           </div>
-          <div className="settings-content">
-            <SettingContent />
-          </div>
-      </div>
+      </>
     )
   }
 }

src/user/dashboard/settings/styles/SettingSidebar.scss

@@ -1,8 +1,6 @@
 .settings__right__container {
   display: flex;
  .settings__left__nav {
-  max-width: 17%;
-  height: 50%;
   margin-top: 38px;
   margin-left: 10px;
  }
@@ -26,6 +24,7 @@
   .right__setting__option__content {
     width: 56vw;
     .deactivate___settings__btn {
+      border-radius: 100px;
       &:hover {
         background-color: #ffffff;
       }
@@ -40,4 +39,30 @@
     }
   }
  }
-}
+}
+
+@media (min-width: 320px) and (max-width: 1024px){
+  .settings__right__container {
+    flex-flow: column;
+    padding: 2.5vh 2.5vw;
+   .settings__left__nav {
+     flex: 1;
+     margin: 0;
+     padding: 0;
+   }
+   .settings__right__content {
+    flex: 3;
+    margin: 4vh 0;
+    padding: 0;
+    width: 100%;
+    max-width: 100%;
+    .right__setting__option__content {
+      width: 100%;
+      .row {
+        margin: 0;
+        padding: 0;
+      }
+    }
+   }
+  }
+}

src/user/dashboard/settings/styles/settings.scss

@@ -4,25 +4,23 @@
   height: auto;
   font-family: Muli, sans-serif;
 
-  .navigation {
-    background: #f5f5f5;
-    flex-grow: 1;
-    border-right: solid 1px #dfe9f1;
-    position: fixed;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    overflow-y: scroll;
-  }
-  .setting-sidebar {
+  .setting__sidebar {
     border-left: solid 1px #dfe9f1;
   }
 
-  .settings-content {
+  .settings__content {
     flex: 3;
     margin-left: 13vw;
   }
   .options {
     color: rgba(0, 0, 0, 0.5);
   }
 }
+
+@media (min-width: 320px) and (max-width: 1024px){
+  .settings {
+    .settings__content {
+      margin-left: 0;
+    }
+  }
+}