made the style changes

Author: dewanshDT

client/styles/components/_form-container.scss

@@ -2,24 +2,29 @@
 	text-align: center;
 	display: flex;
 	flex-direction: column;
-  align-items: center;
+	align-items: center;
 	justify-content: center;
 	flex: 1;
+
+	@media (max-width: 550px) {
+		text-align: left;
+		justify-content: start;
+	}
 }
 
 .form-container--align-left {
-  text-align: left;
+	text-align: left;
 }
 
 .form-container--align-top {
-  height: unset;
+	height: unset;
 }
 
 .form-container__header {
 	width: 100%;
 	padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem;
 	display: flex;
-  justify-content: space-between;
+	justify-content: space-between;
 }
 
 .form-container__content {
@@ -31,28 +36,32 @@
 }
 
 .form-container--align-left .form-container__content {
-  align-items: left;
+	align-items: left;
 }
 
 .form-container__title {
 	font-weight: normal;
 	@include themify() {
-    color: getThemifyVariable('form-title-color')
-  }
+		color: getThemifyVariable("form-title-color");
+	}
+
+	@media (max-width: 770px) {
+		display: none;
+	}
 }
 
 .form-container__context {
-  @include themify() {
-    color: getThemifyVariable('secondary-text-color')
-  }
+	@include themify() {
+		color: getThemifyVariable("secondary-text-color");
+	}
 }
 
 .form-container__divider {
-  padding: #{20 / $base-font-size}rem 0;
+	padding: #{20 / $base-font-size}rem 0;
 }
 
 .form-container__logo-button {
-  @include icon();
+	@include icon();
 }
 
 .form-container__exit-button {

client/styles/components/_forms.scss

@@ -5,7 +5,7 @@
   font-size: #{12 / $base-font-size}rem;
   text-align: left;
   @include themify() {
-    color: getThemifyVariable('error-color');
+    color: getThemifyVariable("error-color");
   }
 }
 
@@ -27,11 +27,16 @@
   margin-top: #{16 / $base-font-size}rem;
   font-size: #{12 / $base-font-size}rem;
   @include themify() {
-    color: getThemifyVariable('form-navigation-options-color');
+    color: getThemifyVariable("form-navigation-options-color");
+  }
+
+  @media (max-width: 550px) {
+    text-align: center;
+    margin: #{12 / $base-font-size}rem;
   }
 }
 
-.form__legend{
+.form__legend {
   font-size: #{21 / $base-font-size}rem;
   font-weight: bold;
 }
@@ -42,7 +47,7 @@
   margin-bottom: #{7 / $base-font-size}rem;
   display: block;
   @include themify() {
-    color: getThemifyVariable('form-secondary-title-color');
+    color: getThemifyVariable("form-secondary-title-color");
   }
 }
 
@@ -56,8 +61,8 @@
   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');
+    color: getThemifyVariable("form-input-text-color");
+    background-color: getThemifyVariable("input-background-color");
   }
 }
 
@@ -67,7 +72,7 @@
 
 .form__input::placeholder {
   @include themify() {
-    color: getThemifyVariable('form-input-placeholder-text-color');
+    color: getThemifyVariable("form-input-placeholder-text-color");
   }
 }
 
@@ -78,7 +83,7 @@
 
 .form__status {
   @include themify() {
-    color: getThemifyVariable('form-navigation-options-color');
+    color: getThemifyVariable("form-navigation-options-color");
   }
 }