From a281793ed01784cdd0fd00865eb3417e4edca5a6 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Mon, 8 Aug 2022 09:39:26 -0700
Subject: [PATCH] BRS-604: New PR due to certain changes not added into last PR
 (#156)

* BRS-604: Adjust A&R Footer, with signed commits

* Added media query to turn quick links into columns for mobile sizes

* Condense extra line

Co-authored-by: Wilson Wong <Wilson.1.Wong@gov.bc.ca>
---
 src/app/footer/footer.component.html |  4 +--
 src/app/footer/footer.component.scss | 44 ++++++++++++++++++++--------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index bbf771d..27fe3ae 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -8,9 +8,7 @@
         <a href="https://reserve-admin.bcparks.ca/dayuse/">Day-Use Pass Admin</a>
       </div>
       <div class="col">
-        <a href="mailto:parkoperatorsystems@gov.bc.ca"
-          >Contact Us</a
-        >
+        <a href="mailto:parkoperatorsystems@gov.bc.ca">Contact Us</a>
       </div>
     </div>
   </nav>
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 399af97..155dded 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -1,20 +1,38 @@
 @import "/src/assets/themes/variables";
 
-#footer {
-  background-color: $primary-nav;
-  height: 4.1rem;
-  position: relative;
+@media only screen and (min-width: 769px) {
+  #footer {
+    background-color: $primary-nav;
+    height: 4.1rem;
+    position: relative;
+  }
+
+  .row {
+    max-width: 29rem;
+    margin: 0 auto;
+    position: absolute;
+    top: 50%;
+    right: 50%;
+    margin-right: -50%;
+    transform: translate(-5%, -50%);
+    white-space: nowrap;
+  }
 }
 
-.row {
-  max-width: 29rem;
-  margin: 0 auto;
-  position: absolute;
-  top: 50%;
-  right: 50%;
-  margin-right: -50%;
-  transform: translate(-5%, -50%);
-  white-space: nowrap;
+@media only screen and (max-width: 768px) {
+  #footer {
+    background-color: $primary-nav;
+    height: 4.9rem;
+    position: relative;
+  }
+
+  .row {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin-left: 12px;
+    margin-right: 12px;
+  }
 }
 
 a {