fix: sticky footer

components/Containers/Footer/index.module.css

@@ -47,3 +47,21 @@
     }
   }
 }
+
+.mobileFooter {
+  display: none;
+}
+
+.desktopFooter {
+  display: block;
+}
+
+@media (max-width: 640px) {
+  .mobileFooter {
+    display: block;
+  }
+
+  .desktopFooter {
+    display: none;
+  }
+}

layouts/About.tsx

@@ -7,6 +7,8 @@ import WithNavBar from '@/components/withNavBar';
 import WithSidebar from '@/components/withSidebar';
 import ArticleLayout from '@/layouts/Article';
 
+import styles from '/components/Containers/Footer/index.module.css';
+
 const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
@@ -18,11 +20,16 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
         <main>{children}</main>
 
         <WithMetaBar />
+        <div className={styles.mobileFooter}>
+          <WithFooter />
+        </div>
       </div>
 
       <WithBreadcrumbs navKeys={['about', 'getInvolved']} />
     </ArticleLayout>
-    <WithFooter />
+    <div className={styles.desktopFooter}>
+      <WithFooter />
+    </div>
   </>
 );
 

layouts/Learn.tsx

@@ -8,6 +8,7 @@ import WithProgressionSidebar from '@/components/withProgressionSidebar';
 import WithSidebarCrossLinks from '@/components/withSidebarCrossLinks';
 import ArticleLayout from '@/layouts/Article';
 
+import styles from '/components/Containers/Footer/index.module.css';
 const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
@@ -23,11 +24,16 @@ const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
         </main>
 
         <WithMetaBar />
+        <div className={styles.mobileFooter}>
+          <WithFooter />
+        </div>
       </div>
 
       <WithBreadcrumbs navKeys={['learn']} />
     </ArticleLayout>
-    <WithFooter />
+    <div className={styles.desktopFooter}>
+      <WithFooter />
+    </div>
   </>
 );