diff --git a/UI/Web/src/app/app.component.scss b/UI/Web/src/app/app.component.scss
index ce79eb9de..8a7519cbf 100644
--- a/UI/Web/src/app/app.component.scss
+++ b/UI/Web/src/app/app.component.scss
@@ -19,7 +19,7 @@
     }
 
     .content-wrapper {
-        padding: 0 10px 0;
+        padding: 0 5px 0;
         overflow: hidden;
 
         &.closed {
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
index 01986ace8..d8830f155 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
+++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
@@ -47,6 +47,10 @@
     align-items: center;
     justify-content: space-around;
 
+    @media (max-width: 576px) {
+        padding: 0 10px 0 5px;
+    }
+
     .btn {
         text-decoration: none;
         color: hsla(0,0%,100%,.7);
diff --git a/UI/Web/src/app/sidenav/side-nav/side-nav.component.scss b/UI/Web/src/app/sidenav/side-nav/side-nav.component.scss
index c54731b03..69fb59652 100644
--- a/UI/Web/src/app/sidenav/side-nav/side-nav.component.scss
+++ b/UI/Web/src/app/sidenav/side-nav/side-nav.component.scss
@@ -2,7 +2,7 @@
     padding-bottom: 10px;
     width: 190px;
     background-color: var(--side-nav-bg-color);
-    height: calc(100vh - 85px);
+    height: calc((var(--vh)*100) - 85px);
     position: fixed;
     margin: 0;
     left: 10px;
@@ -36,7 +36,7 @@
         padding: 10px 0;
         width: 55vw;
         background-color: var(--side-nav-mobile-bg-color);
-        height: calc(100vh - 56px);
+        height: calc((var(--vh)*100) - 56px);
         position: fixed;
         margin: 0;
         left: 0;
@@ -61,7 +61,7 @@
     .side-nav-overlay {
         background-color: var(--side-nav-overlay-color);
         width: 100vw;
-        height: calc(100vh - 56px);
+        height: calc((var(--vh)*100) - 56px);
         position: absolute;
         left: 0;
         z-index: 998;