From c72bc420534a6b585c78f9f396a9dcb0297d2a89 Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Mon, 23 Aug 2021 12:16:21 -0400
Subject: [PATCH] added mobile styling

---
 pages/resources/advice/academic.tsx    |  2 +-
 pages/resources/advice/coop.module.css | 19 ++++++++++++++++++-
 pages/resources/advice/coop.tsx        |  2 +-
 pages/resources/advice/misc.tsx        |  2 +-
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/pages/resources/advice/academic.tsx b/pages/resources/advice/academic.tsx
index eca6c66d..aa7823a0 100644
--- a/pages/resources/advice/academic.tsx
+++ b/pages/resources/advice/academic.tsx
@@ -4,7 +4,7 @@ import Content from "../../../content/advice/academic-advice.mdx";
 
 import { Advice } from "./coop";
 
-export default function CoopAdvice() {
+export default function AcademicAdvice() {
   return (
     <Advice>
       <Content />
diff --git a/pages/resources/advice/coop.module.css b/pages/resources/advice/coop.module.css
index 660cabae..8ee91ad4 100644
--- a/pages/resources/advice/coop.module.css
+++ b/pages/resources/advice/coop.module.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-end;
   padding-bottom: calc(32rem / 16);
   border-bottom: calc(1rem / 16) solid var(--primary-heading);
 }
@@ -33,3 +33,20 @@ a.currentAdvice {
 .content {
   padding-bottom: calc(48rem / 16);
 }
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .titleContainer {
+    flex-direction: column-reverse;
+    align-items: center;
+    padding-bottom: unset;
+  }
+
+  .title {
+    padding-right: unset;
+    text-align: center;
+  }
+
+  .codey {
+    width: calc(140rem / 16);
+  }
+}
diff --git a/pages/resources/advice/coop.tsx b/pages/resources/advice/coop.tsx
index 8562315c..d38a0dfb 100644
--- a/pages/resources/advice/coop.tsx
+++ b/pages/resources/advice/coop.tsx
@@ -23,7 +23,7 @@ export function Advice(props: { children: ReactNode }) {
     <>
       <div className={styles.titleContainer}>
         <h1 className={styles.title}>Waterloo Undergraduate Advice</h1>
-        <Image src="/resources/advice/codey.svg" />
+        <Image src="/resources/advice/codey.svg" className={styles.codey} />
       </div>
       <div className={styles.adviceBarContainer}>
         <Link href="/resources/advice/coop">
diff --git a/pages/resources/advice/misc.tsx b/pages/resources/advice/misc.tsx
index 21eb3d10..e3ef7196 100644
--- a/pages/resources/advice/misc.tsx
+++ b/pages/resources/advice/misc.tsx
@@ -4,7 +4,7 @@ import Content from "../../../content/advice/misc-advice.mdx";
 
 import { Advice } from "./coop";
 
-export default function CoopAdvice() {
+export default function MiscAdvice() {
   return (
     <Advice>
       <Content />