diff --git a/src/_assets/css/chattable.css b/src/_assets/css/chattable.css
index 005b17c..48969df 100644
--- a/src/_assets/css/chattable.css
+++ b/src/_assets/css/chattable.css
@@ -1,7 +1,13 @@
 #chattable {
   border: 0 solid rgba(255, 255, 255, 0);
   width: 100%;
-  height: 720px !important;
+  height: calc(100vh - 175px) !important;
+}
+
+@media all and (max-width: 1100px) {
+  #chattable {
+    height: calc(100vh - 350px) !important;
+  }
 }
 
 #top_banner {
diff --git a/src/_includes/styles.css b/src/_includes/styles.css
index a170eb2..db767ca 100644
--- a/src/_includes/styles.css
+++ b/src/_includes/styles.css
@@ -227,6 +227,14 @@ footer {
   background-color: var(--bg);
 }
 
+.page-content {
+  /* TODO fix this magic number */
+  min-height: calc(100vh - 95px);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
 @media all and (max-width: 1100px) {
   body {
     flex-direction: column-reverse;
@@ -252,6 +260,10 @@ footer {
     padding-top: 5px;
   }
 
+  .page-content {
+    min-height: calc(100vh - 300px);
+  }
+
   .sidebar-contents {
     border-radius: 0;
     width: 100%;
@@ -288,14 +300,6 @@ footer {
   }
 }
 
-.page-content {
-  /* TODO fix this magic number */
-  min-height: calc(100vh - 95px);
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
 .date-tag {
   font-size: smaller;
 }