Browse Source

fix(Reset/Set Password): now mobile responsive

Signed-off-by: Jonathan <theflametrooper@gmail.com>
Jonathan 4 years ago
parent
commit
c2292b2a1a
1 changed files with 17 additions and 3 deletions
  1. 17 3
      frontend/src/pages/ResetPassword.vue

+ 17 - 3
frontend/src/pages/ResetPassword.vue

@@ -470,14 +470,18 @@ p {
 		height: 50px;
 		margin-top: 36px;
 
+		@media screen and (max-width: 300px) {
+			display: none;
+		}
+
 		.step {
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			border-radius: 100%;
 			border: 1px solid $dark-grey;
-			width: 50px;
-			height: 50px;
+			min-width: 50px;
+			min-height: 50px;
 			background-color: #fff;
 			font-size: 30px;
 			cursor: pointer;
@@ -503,9 +507,14 @@ p {
 		border-radius: 3px;
 		background-color: #fff;
 		border: 1px solid $dark-grey;
-		width: 580px;
+		max-width: 580px;
 		padding: 40px;
 
+		@media screen and (max-width: 300px) {
+			margin-top: 30px;
+			padding: 30px 20px;
+		}
+
 		.content-box-title {
 			font-size: 25px;
 			color: #000;
@@ -530,6 +539,10 @@ p {
 				.button {
 					width: 105px;
 				}
+
+				@media screen and (max-width: 450px) {
+					flex-direction: column;
+				}
 			}
 
 			label {
@@ -555,6 +568,7 @@ p {
 			font-size: 21px;
 			font-weight: 800;
 			color: #000;
+			text-align: center;
 		}
 
 		.success-icon {