fix: display footer in viewport on mobile browsers (#36)

danielroe · Mar 6, 2024 · eade896 · eade896
1 parent a9e64fd
commit eade896
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/app.vue b/app.vue
@@ -127,7 +127,7 @@ else {
 </script>
 
 <template>
-  <div class="md:pl-[5vw] font-sans text-white min-h-screen min-w-screen flex flex-col items-start justify-start">
+  <div class="md:pl-[5vw] font-sans text-white min-h-screen min-h-dvh min-w-screen flex flex-col items-start justify-start">
     <div v-if="showConfetti" v-confetti />
     <div class="flex flex-col justify-start mt-4 sm:mt-8 md:my-12 p-4 gap-8 md:gap-12 flex-grow max-w-full">
       <div class="flex flex-row gap-4 text-white text-3xl md:text-5xl">

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -12,6 +12,11 @@ export default defineNuxtConfig({
     '@nuxtjs/plausible',
     '@nuxtjs/html-validator',
   ],
+  unocss: {
+    rules: [
+      ['min-h-screen', { 'min-height': '100vh' }, { layer: '_fallback' }],
+    ],
+  },
   htmlValidator: {
     failOnError: true,
   },