diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index 09906e51..d8379a65 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -473,12 +473,12 @@ a .users-poster-face:hover {
     position: relative;
     height: 260px;
     width: 350px;
-    margin-right: 25px;
-    margin-bottom: 25px;
+    margin-right: 20px;
+    margin-bottom: 20px;
 }
 .dashboard-activity-poster {
     height: 200px;
-    width: 350px;
+    width: 100%;
     position: relative;
     overflow: hidden;
 }
@@ -490,8 +490,8 @@ a:hover .dashboard-activity-poster {
 .dashboard-activity-poster-face {
     background-position: center;
     background-size: cover;
-    height: 200px;
-    width: 350px;
+    height: 100%;
+    width: 100%;
     position: absolute;
     top: 0;
     right: 0;
@@ -503,13 +503,11 @@ a:hover .dashboard-activity-poster {
     z-index: -3;
 }
 .dashboard-activity-cover-face-bg {
-}
-.dashboard-activity-poster-music-bg {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
-    height: 200px;
-    width: 350px;
+    height: 100%;
+    width: 100%;
     position: absolute;
     top: 0;
     right: 0;
@@ -528,22 +526,22 @@ a:hover .dashboard-activity-poster {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
-    height: 200px;
+    height: 100%;
     width: 200px;
     -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     position: absolute;
     top: 0;
-    left: 77px;
+    left: calc(50% - 100px);
     z-index: -3;
 }
 .dashboard-activity-clip-face-bg {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
-    height: 200px;
-    width: 350px;
+    height: 100%;
+    width: 100%;
     position: absolute;
     top: 0;
     right: 0;
@@ -562,7 +560,7 @@ a:hover .dashboard-activity-poster {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
-    height: 200px;
+    height: 100%;
     width: 130px;
     position: relative;
     -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
@@ -570,7 +568,7 @@ a:hover .dashboard-activity-poster {
     box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     position: absolute;
     top: 0;
-    left: 110px;
+    left: calc(50% - 65px);
     z-index: -3;
 }
 .dashboard-activity-info-details-overlay {
@@ -605,7 +603,7 @@ a:hover .dashboard-activity-poster {
 }
 .dashboard-activity-info-details-content {
     height: 200px;
-    width: 350px;
+    width: 100%;
     line-height: 25px;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -698,7 +696,7 @@ a:hover .dashboard-activity-poster {
 }
 .dashboard-activity-metadata-wrapper {
     position: relative;
-    width: 350px;
+    width: 100%;
     height: 50px;
     font-size: 13px;
     padding: 0 3px;
@@ -932,6 +930,7 @@ a .dashboard-activity-metadata-user-thumb:hover {
     background-clip: content-box;
     min-height: calc(100% - 200px);
     position: inherit;
+    width: 100%;
 }
 .summary-content-poster {
     float: left;
@@ -1892,7 +1891,7 @@ a .home-platforms-instance-list-oval:hover,
 }
 .home-platforms-instance .slider {
     background-color: #2d2d2d;
-    width: 350px;
+    width: calc(100% + 20px);
     display: none;
     position: absolute;
     top: 128px;
@@ -2329,3 +2328,14 @@ a .home-platforms-instance-list-oval:hover,
     border-radius: 8px;
     background-clip: padding-box;
 }
+
+@media only screen 
+  and (min-device-width: 300px) 
+  and (max-device-width: 400px) {
+    .home-platforms-instance {
+        width: calc(100% - 20px);
+    }
+    .dashboard-instance {
+        width: 100%;
+    }
+}
\ No newline at end of file