I edited the not found page on mobile

aline-borges · Oct 30, 2020 · 4a2c7af · 4a2c7af
1 parent 37b4a4b
commit 4a2c7af
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 21 deletions.
diff --git a/src/app/pages/errors/not-found/not-found.component.html b/src/app/pages/errors/not-found/not-found.component.html
@@ -1,6 +1,8 @@
 <div class="container">
-  <h1 class="title-page">Infelizmente, a página que você está procurando não existe..</h1>
-  <h2 class="error-number">404</h2>
-  <img class="error-image" src="../../../../assets/images/lost.png" alt="car">
-  <p class="help-message">...Mas vamos te ajudar ok? <span routerLink="/home" (click)="changeTitle()" class="back-to-homepage">Volte para a página inicial.</span></p>
+  <div class="not-found-container">
+    <h1 class="title-page">Infelizmente, a página que você está procurando não existe..</h1>
+    <h2 class="error-number">404</h2>
+    <img class="error-image" src="../../../../assets/images/lost.png" alt="car">
+    <p class="help-message">...Mas vamos te ajudar ok? <span routerLink="/home" (click)="changeTitle()" class="back-to-homepage">Volte para a página inicial.</span></p>
+  </div>
 </div>
diff --git a/src/app/pages/errors/not-found/not-found.component.scss b/src/app/pages/errors/not-found/not-found.component.scss
@@ -42,6 +42,11 @@ $tuleWhite: #fefefedc;
   padding-top: 2rem;  
 }
 
+.not-found-container {
+  margin: auto;
+  padding: 2rem;
+}
+
 /* TEXTS */
 
 span {
@@ -50,48 +55,42 @@ span {
 
 .title-page,
 .help-message {
-  padding: 2rem;
+  padding: 1rem;
+  font-size: 2.4rem;
+
+  @include for-phone-only {
+    font-size: 1.8rem;
+  }
 }
 
 .title-page {
-  font-size: 3.2rem;
   font-weight: 700;
   color: $superDarkBlue;
-
-  @include for-phone-only {
-    font-size: 2.4rem;
-  }
 }
 
-
 .error-number {
   font-size: 12rem;
   font-weight: 700;
-  color: #E59B2C;
+  color: $blue;
 
   @include for-phone-only {
-    font-size: 10rem;
+    font-size: 8rem;
   }
 }
 
 .help-message {
-  font-size: 2.4rem;
   font-weight: 700;
   color: $superDarkBlue;
-
-  @include for-phone-only {
-    font-size: 1.6rem;
-  }
 }
 
 .back-to-homepage {
   font-size: 2.4rem;
   font-weight: 700;
-  color: #E59B2C;
+  color: $blue;
   cursor: pointer;
 
   @include for-phone-only {
-    font-size: 1.6rem;
+    font-size: 1.8rem;
   }
 }
 
@@ -102,7 +101,7 @@ span {
   margin:  0 auto 0 auto;
 
   @include for-phone-only {
-    width: 32rem;
+    width: 28rem;
     margin: auto;
   }
 }
diff --git a/src/assets/images/lost.png b/src/assets/images/lost.png