Merge pull request #2400 from dewanshDT/develop

Account Settings Page UI for mobile devices

Author: lindapaiste

client/styles/components/_account.scss

@@ -4,6 +4,12 @@
     background-color: getThemifyVariable('background-color');
   }
   min-height: 100%;
+
+  @media (max-width: 770px) {
+    .account-settings__header {
+      display: none;
+    }
+  }
 }
 
 .account-settings {
@@ -24,6 +30,16 @@
 
 .account__social-stack {
   display: flex;
+  @media (max-width: 770px) {
+    flex-direction: column;
+    align-items: center;
+    gap: #{15 / $base-font-size}rem;
+
+    button, a {
+      width: 100% !important;
+      margin-right: 0;
+    }
+  }
 }
 
 .account__social-stack > * {

client/styles/components/_form-container.scss

@@ -29,6 +29,7 @@
 
 .form-container__content {
 	height: 100%;
+	max-width: 90vw;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -59,6 +60,10 @@
 
 .form-container__divider {
 	padding: #{20 / $base-font-size}rem 0;
+
+	@media (max-width: 770px) {
+		text-align: center;
+	}
 }
 
 .form-container__logo-button {

client/styles/components/_forms.scss

@@ -56,14 +56,19 @@
 }
 
 .form__input {
-  max-width: 90vw;
-  width: #{360 / $base-font-size}rem;
+  min-width: #{355 / $base-font-size}rem;
+  width: 100%;
   height: #{40 / $base-font-size}rem;
   font-size: #{16 / $base-font-size}rem;
   @include themify() {
     color: getThemifyVariable("form-input-text-color");
     background-color: getThemifyVariable("input-background-color");
   }
+
+  @media (max-width: 770px) {
+    max-width: 100%;
+    width:100%;
+  }
 }
 
 .form__input-flexible-height {