diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 6b09753c9f..cb7fc4c4b4 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -832,5 +832,27 @@ a.itemTag:hover {
     }
 }
 
-@media all and (min-height: 1000px) {
+.viewCollageImage {
+    display: inline-block;
+    margin: 0 1px 0 0;
+    width: 32.6%;
+    height: 49%;
+    background-repeat: no-repeat;
+    background-position: center 15%;
+    background-size: cover;
+}
+
+@media all and (min-width: 650px) {
+
+    .viewCollageImage {
+        width: 32.8%;
+        height: 49.1%;
+    }
+}
+
+@media all and (min-width: 1440px) {
+
+    .viewCollageImage {
+        width: 32.9%;
+    }
 }
diff --git a/dashboard-ui/scripts/indexpage.js b/dashboard-ui/scripts/indexpage.js
index 6430bae1dd..f5b4a5b703 100644
--- a/dashboard-ui/scripts/indexpage.js
+++ b/dashboard-ui/scripts/indexpage.js
@@ -43,7 +43,7 @@
 
             var url = urls[i];
 
-            html += '<div style="display:inline-block;margin: 0 1px 0 0; width: 32.6%; height: 48.5%; background-repeat: no-repeat; background-position: center 15%; background-size: cover; background-image: url(\'' + url + '\');"></div>';
+            html += '<div class="viewCollageImage" style="background-image: url(\'' + url + '\');"></div>';
 
         }