added mobile styling

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 />

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);
+  }
+}

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">

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 />