Home Style -- css code

[XoXoXoXo]

How do I get the Home page in Jellyfin to display the page with no horizontal scroll, just scrolling down?

I think the option is within css code, if I am correct about this.

Thank you

   

   

[Ted Hinklater]

How do I get the Home page in Jellyfin to display the page with no horizontal scroll, just scrolling down?

I think the option is within css code, if I am correct about this.

Thank you

There are a few ways but I think a 7 x grid is cleanest. 

First row sets the card sizes, 
2nd row sets the containers as a grid (only on the index/homepage)
3rd row limits the items to 14, it looks cleaner but feel free to remove that if you don't want it 

Code:

.layout-desktop #indexPage .overflowBackdropCard, .overflowPortraitCard, .overflowSquareCard { width: 12.5vw; }
.layout-desktop #indexPage .itemsContainer { display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 1em; }
.layout-desktop #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card:nth-child(n+15) { display: none !important; }

The CSS box you highlighted in your 2nd image - That box only applies to that user on that client.
If you want it to apply to every user on every client, paste the code into the CSS box in your Dashboard, under "Branding"

[XoXoXoXo]

How do I get the Home page in Jellyfin to display the page with no horizontal scroll, just scrolling down?

I think the option is within css code, if I am correct about this.

Thank you

There are a few ways but I think a 7 x grid is cleanest. 

First row sets the card sizes, 
2nd row sets the containers as a grid (only on the index/homepage)
3rd row limits the items to 14, it looks cleaner but feel free to remove that if you don't want it 

Code:

.layout-desktop #indexPage .overflowBackdropCard, .overflowPortraitCard, .overflowSquareCard { width: 12.5vw; }
.layout-desktop #indexPage .itemsContainer { display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 1em; }
.layout-desktop #indexPage .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX .card:nth-child(n+15) { display: none !important; }

The CSS box you highlighted in your 2nd image - That box only applies to that user on that client.
If you want it to apply to every user on every client, paste the code into the CSS box in your Dashboard, under "Branding"

@Ted Hinklater, I do thank you sincerely, and I appreciate your help, delineate explanation of each line of the CCS codes, and for mentioning the extra, the method on how to apply this custom display universally. I thank you for quickly coming to assistance on this.

I was annoyed with the default display, a matter of taste. I did try now and then to figure out how to change the Home display, and the arrangement you supplied for the display and style of Home page is magnificent and looks very pleasing. Thank you Ted.