Refactoring error page component style

2 files changed, 7 insertions, 18 deletions

diff --git a/client/src/app/+error-page/error-page.component.html b/client/src/app/+error-page/error-page.component.html
index b8b9296a3..6a1675f90 100644
--- a/client/src/app/+error-page/error-page.component.html
+++ b/client/src/app/+error-page/error-page.component.html
@@ -54,5 +54,5 @@
     <div class="muted" i18n="This is about Sepia's tea">Sepia seems to like it.</div>
   </div>
 
-  <img src='/client/assets/images/mascot/{{ getMascotName() }}.svg' alt='{{ status }} mascot' class="mb-4">
+  <img src='/client/assets/images/mascot/{{ getMascotName() }}.svg' alt='{{ status }} mascot' class="mb-4 h-auto">
 </div>
diff --git a/client/src/app/+error-page/error-page.component.scss b/client/src/app/+error-page/error-page.component.scss
index 4e12e8c78..5193c2871 100644
--- a/client/src/app/+error-page/error-page.component.scss
+++ b/client/src/app/+error-page/error-page.component.scss
@@ -4,25 +4,26 @@
 .root {
   @include margin-left(auto);
   @include margin-right(auto);
+  @include padding-top(9rem);
+  @include rfs(45rem, width);
 
   height: 100%;
   text-align: center;
-  padding-top: 150px;
   display: flex;
   justify-content: center;
   flex-direction: column-reverse;
 
+
   .box {
+    @include font-size(1.20rem);
+
     text-align: start;
-    font-size: 120%;
     padding: 0 15px;
   }
 
   img {
     @include margin-left(auto);
-
-    width: 220px;
-    height: auto;
+    @include rfs(14rem, width);
   }
 
   @media screen and (max-width: $mobile-view) {
@@ -30,16 +31,4 @@
       @include margin-right(auto);
     }
   }
-
-  @media screen and (min-width: $mobile-view) {
-    width: 400px;
-  }
-
-  @media screen and (max-height: 600px) {
-    padding-top: 50px;
-
-    img {
-      width: 160px;
-    }
-  }
 }