diff --git a/app/app.css b/app/app.css
index 51b0eab97..381d5059a 100644
--- a/app/app.css
+++ b/app/app.css
@@ -1,6 +1,6 @@
 :root {
-    --header-height: 50px;
-    --footer-height: 40px;
+    --header-height: 48px;
+    --footer-height: 30px;
 }
 
 html {
@@ -9,7 +9,7 @@ html {
 }
 
 body {
-    margin-bottom: 35px;
+    margin-bottom: 30px;
 }
 
 .footer {
@@ -17,7 +17,7 @@ body {
     bottom: 0;
     width: 100%;
     height: var(--footer-height);
-    padding-top: 12px;
+    padding-top: 7px;
     background-color: #2c3e50;
     color: white;
     font-size: 0.8rem;
@@ -39,7 +39,7 @@ header {
 }
 
 .navbar {
-    max-width: 1140px;
+    max-width: 1100px;
     margin-bottom: 1em;
     z-index: 999;
     background-color: inherit;
@@ -64,22 +64,23 @@ main.container-fluid {
     width: 100%;
 }
 
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 900px) {
     main.container-fluid {
         margin: 2em 2em calc(2em + var(--header-height)) 2em;
         width: calc(100% - 4em);
     }
 }
 
-@media screen and (min-width: 1500px) {
+@media screen and (min-width: 1200px) {
     main.container-fluid {
         margin: 2em auto calc(2em + var(--header-height)) auto;
-        width: 1500px;
+        width: 1200px;
     }
 }
 
 main .ratio {
     margin: auto;
+    width: 90%; 
 }
 
 main .ratio > * {
@@ -89,6 +90,7 @@ main .ratio > * {
 
 .ratio-5x7 {
     overflow-y: hidden;
+    overflow-x: hidden;
 }
 
 .ratio-5x7::before {
@@ -97,12 +99,13 @@ main .ratio > * {
 
 @media screen and (min-width: 768px) {
     .ratio-5x7 {
-        max-height: calc(100vh - 2em - var(--header-height) - var(--footer-height));
+        max-height: calc(100vh - 2em - var(--header-height) - var(--footer-height));        
     }
 
     main .ratio {
         /* set the width to fit the vertical space, and the height will be set automatically */
         max-width: calc(100vh - 2em - var(--header-height) - var(--footer-height));
+        width: 100%;
     }
 }