☰

YouTube - Force 4-row thumbnails on home feed + Compact subscriptions page

This style forces the 4-row thumbnails on homepage feed (this also includes both compact thumbnails on subscriptions feed and disabling gigantic search result thumbnails).

  1. /* ==UserStyle==
  2. @name         YouTube - Force 4-row thumbnails on home feed + Compact subscriptions page
  3. @version      20250423.16.21
  4. @namespace    userstyles.world/user/magma_craft
  5. @description  This style forces the 4-row thumbnails on homepage feed (this also includes both compact thumbnails on subscriptions feed and disabling gigantic search result thumbnails).
  6. @author       magma_craft
  7. @license      CC Zero
  8. ==/UserStyle== */
  9.  
  10. @-moz-document domain("youtube.com") {
  11. /* Revert 3-row thumbnails on home page back to 4-row one */
  12. [page-subtype="home"] #contents.ytd-rich-grid-renderer {
  13.   --ytd-rich-grid-items-per-row: 4 !important;
  14. }
  15.  
  16. ytd-browse.style-scope.ytd-page-manager[page-subtype="home"] > ytd-two-column-browse-results-renderer > #primary.ytd-two-column-browse-results-renderer > ytd-rich-grid-renderer > #contents.ytd-rich-grid-renderer {
  17.   width: 96% !important;
  18. }
  19.  
  20. ytd-browse.style-scope.ytd-page-manager[page-subtype="home"] #contents > ytd-rich-grid-row,
  21. ytd-browse.style-scope.ytd-page-manager[page-subtype="home"] #contents > ytd-rich-grid-row > #contents {
  22.   display: contents !important;
  23. }
  24.  
  25. ytd-browse.style-scope.ytd-page-manager[page-subtype="home"] > ytd-two-column-browse-results-renderer > #primary.ytd-two-column-browse-results-renderer > ytd-rich-grid-renderer > #contents.ytd-rich-grid-renderer > #contents > ytd-rich-grid-row > #contents > ytd-rich-item-renderer > #content {
  26.   margin-left: 0 !important;
  27.   margin-right: 0 !important;
  28. }
  29.  
  30. /* Font size and other fixes for the homepage info */
  31. [page-subtype="home"] ytd-video-meta-block[rich-meta][mini-mode] #byline-container.ytd-video-meta-block {
  32.   font-size: 1.4rem !important;
  33. }
  34.  
  35. [page-subtype="home"] ytd-video-meta-block[rich-meta][mini-mode] #metadata-line.ytd-video-meta-block {
  36.   font-size: 1.4rem !important;
  37. }
  38.  
  39. [page-subtype="home"] #content.ytd-rich-section-renderer {
  40.   margin: 0 8px !important;
  41. }
  42.  
  43. /* Force compact thumbnails on subscriptions page */
  44. [page-subtype="subscriptions"] #avatar-link.ytd-rich-grid-media, [page-subtype="subscriptions"] #avatar-container.ytd-rich-grid-media {
  45. display: none !important;
  46. margin-right: 0 !important
  47. }
  48.  
  49. [page-subtype="subscriptions"] #video-title.ytd-rich-grid-media {
  50. font-size: 1.4rem !important;
  51. line-height: 1.8rem !important
  52. }
  53.  
  54. [page-subtype="subscriptions"] ytd-video-meta-block[rich-meta] #channel-name.ytd-video-meta-block, [page-subtype="subscriptions"] ytd-video-meta-block[rich-meta] #metadata-line.ytd-video-meta-block {
  55. font-size: 1.2rem !important
  56. }
  57.  
  58. [page-subtype="subscriptions"] ytd-rich-shelf-renderer {
  59. display: none !important
  60. }
  61.  
  62. [page-subtype="subscriptions"] ytd-rich-item-renderer {
  63. margin-left: 0px !important;
  64. margin-right: 0px !important;
  65. margin-bottom: 24px;
  66. width: calc(100% / var(--ytd-rich-grid-items-per-row) - 4px - 0.01px)
  67. }
  68.  
  69. [page-subtype="subscriptions"] h3.ytd-rich-grid-video-renderer {
  70. margin: 8px 0 8px !important
  71. }
  72.  
  73. [page-subtype="subscriptions"] ytd-primetime-promo-renderer.ytd-rich-section-renderer, [page-subtype="subscriptions"] ytd-inline-survey-renderer.ytd-rich-section-renderer {
  74. border-top: 1px solid var(--yt-spec-10-percent-layer);
  75. border-bottom: 1px solid var(--yt-spec-10-percent-layer)
  76. }
  77.  
  78. [page-subtype="subscriptions"] ytd-thumbnail[size=large] a.ytd-thumbnail, [page-subtype="subscriptions"] ytd-thumbnail[size=large]:before {
  79. border-radius: 8px !important
  80. }
  81.  
  82. ytd-thumbnail[size=large] ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail, ytd-thumbnail[size=large] ytd-thumbnail-overlay-button-renderer.ytd-thumbnail, ytd-thumbnail[size=large] ytd-thumbnail-overlay-toggle-button-renderer.ytd-thumbnail {
  83. margin: 4px !important
  84. }
  85.  
  86. [page-subtype="subscriptions"] div.ghost-grid.style-scope.ytd-ghost-grid-renderer {
  87. display: none !important
  88. }
  89.  
  90. [page-subtype="subscriptions"] html:not(.style-scope) {
  91. --ytd-rich-grid-item-max-width: 210px !important;
  92. --ytd-rich-grid-item-margin: 4px !important
  93. }
  94.  
  95. [page-subtype="subscriptions"] #contents.ytd-rich-grid-renderer, [page-subtype="subscriptions"] #grid-header.ytd-rich-grid-renderer {
  96. width: calc(100% + 4px + 0.01px) !important;
  97. max-width: calc( var(--ytd-rich-grid-items-per-row) * (var(--ytd-rich-grid-item-max-width) + var(--ytd-rich-grid-item-margin))) !important
  98. }
  99.  
  100. @media (max-width: 456px) {ytd-rich-grid-renderer {--ytd-rich-grid-items-per-row: 1 !important;--ytd-rich-grid-posts-per-row: 1 !important;}}
  101.  
  102. [page-subtype="subscriptions"] ytd-rich-grid-renderer, [page-subtype="subscriptions"] ytd-rich-grid-renderer.style-scope.ytd-two-column-browse-results-renderer {
  103. --ytd-rich-grid-items-per-row: var(--grid-items-videos--per-row) !important;
  104. --ytd-rich-grid-posts-per-row: var(--grid-posts-videos-per-row) !important
  105. }
  106.  
  107. @media (max-width: 456px) {html:not(.style-scope) {--grid-items-videos--per-row: 1;--grid-posts-videos-per-row: 1;}}
  108.  
  109. @media (min-width: 457px) {html:not(.style-scope) {--load-videos-items-per-row: 903px;--grid-items-videos--per-row: 2;--grid-posts-videos-per-row: 2;}}@media (min-width: 647px) {html:not(.style-scope) {--load-videos-items-per-row: 1300px;--grid-items-videos--per-row: 3;--grid-posts-videos-per-row: 3;}}
  110.  
  111. @media (min-width: 957px) {html:not(.style-scope) {--load-videos-items-per-row: 1680px;--grid-items-videos--per-row: 4;--grid-posts-videos-per-row: 3;}}
  112.  
  113. @media (min-width: 1171px) {html:not(.style-scope) {--load-videos-items-per-row: 2013px;--grid-items-videos--per-row: 5;--grid-posts-videos-per-row: 3;}}
  114.  
  115. @media (min-width: 1600px) {html:not(.style-scope) {--load-videos-items-per-row: 2348px;--grid-items-videos--per-row: 6;--grid-posts-videos-per-row: 3;}}
  116.  
  117. [page-subtype="subscriptions"] ytd-rich-grid-renderer #contents ytd-rich-grid-row, 
  118. [page-subtype="subscriptions"] ytd-rich-grid-renderer #contents ytd-rich-grid-row #contents {
  119. display: contents !important
  120. }
  121.  
  122. [page-subtype="subscriptions"] #contents.ytd-rich-grid-renderer, [page-subtype="subscriptions"] #grid-header.ytd-rich-grid-renderer {
  123. --ytd-rich-grid-item-max-width: 210px !important
  124. }
  125. }