diff --git a/packages/web/src/stylesheets/_main.scss b/packages/web/src/stylesheets/_main.scss
index f0bbb2d8e..f3698bfb7 100644
--- a/packages/web/src/stylesheets/_main.scss
+++ b/packages/web/src/stylesheets/_main.scss
@@ -163,7 +163,7 @@ $footer-height: 2rem;
   width: 100%;
 
   @media screen and (min-width: 768px) {
-    height: calc(var(--viewport-height) - #{$footer-height});
+    height: calc(var(--viewport-height, 100vh) - #{$footer-height});
   }
 
   .section {
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index 102361dd8..f9faf61e5 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -47,16 +47,16 @@ module.exports = {
         125: '31.25rem',
       },
       height: {
-        screen: 'var(--viewport-height)',
+        screen: 'var(--viewport-height, 100vh)',
       },
       minHeight: {
         1: '0.25rem',
         2: '0.5rem',
-        screen: 'var(--viewport-height)',
+        screen: 'var(--viewport-height, 100vh)',
       },
       maxHeight: {
         110: '27.5rem',
-        screen: 'var(--viewport-height)',
+        screen: 'var(--viewport-height, 100vh)',
       },
       zIndex: {
         'editor-content': 'var(--z-index-editor-content)',