Workaround for Youtube homepage layout (#2617)

MozillaReality · Jan 10, 2020 · 84a3a31 · 84a3a31
1 parent ec93f75
commit 84a3a31
Showing 1 changed file with 28 additions and 0 deletions.
diff --git a/app/src/main/assets/web_extensions/webcompat_youtube/main.css b/app/src/main/assets/web_extensions/webcompat_youtube/main.css
@@ -8,3 +8,31 @@
 .ytp-share-icon {
   display: none;
 }
+
+
+/* Fix Youtube homepage is wrongly displayed on only one column
+   See https://github.com/MozillaReality/FirefoxReality/issues/2595 */
+ytd-rich-grid-video-renderer {
+    min-width: 0px;
+}
+
+@media screen and (max-width: 899px) {
+    ytd-rich-grid-renderer {
+        --ytd-rich-grid-items-per-row: 2 !important;
+        --ytd-rich-grid-posts-per-row: 2 !important;
+    }
+}
+
+@media screen and (max-width: 1115px) and (min-width: 900px) {
+    ytd-rich-grid-renderer {
+        --ytd-rich-grid-items-per-row: 3 !important;
+        --ytd-rich-grid-posts-per-row: 3 !important;
+    }
+}
+
+@media screen and (min-width: 1116px) {
+    ytd-rich-grid-renderer {
+        --ytd-rich-grid-items-per-row: 4 !important;
+        --ytd-rich-grid-posts-per-row: 4 !important;
+    }
+}