[#12265] Modify minimum page height to factor in footer height (#12406)

* Edited css main-height variable to calculate footer position based on screen width * Added another case if the screen width is below 314px (Which will probably never happen) * Removed extra space and end of lines * Update src/web/app/page.component.scss by removing the footer case for 313px width and below Co-authored-by: Zhao Jingjing <[email protected]> * Removed 590px or above case and below 313px case for screen width --------- Co-authored-by: Ryan Lin <[email protected]> Co-authored-by: Zhao Jingjing <[email protected]> Co-authored-by: Ryan Lin <[email protected]> Co-authored-by: Wei Qing <[email protected]>
TEAMMATES · Apr 27, 2023 · a4d335d · a4d335d
1 parent 2718d3c
commit a4d335d
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/src/web/app/page.component.scss b/src/web/app/page.component.scss
@@ -14,10 +14,22 @@ nav {
 
 .main-content {
   margin-top: 50px;
-  min-height: calc(100vh - 80px);
+  min-height: calc(100vh - 102px);
   padding: 20px 70px;
 }
 
+@media (max-width: 575px) {
+  .main-content {
+    min-height: calc(100vh - 144px);
+  }
+}
+
+@media (min-width: 576px) and (max-width: 589px) {
+  .main-content {
+    min-height: calc(100vh - 123px);
+  }
+}
+
 .footer {
   padding: 5px 70px;
   color: rgba(255, 255, 255, .75);