CSS for tv series guest stars in grid view

CSS for tv series guest stars in grid view - Printable Version

+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: CSS for tv series guest stars in grid view (/t-css-for-tv-series-guest-stars-in-grid-view)

CSS for tv series guest stars in grid view - zelpi - 2025-02-02

Hi,

I would like to adjust my tv series with grid views. For the general "Cast & Crew" I have the functioning css but it has no effect on the "Guest stars" (the cast for the individual episodes).

Can someone please provide this?

RE: CSS for tv series guest stars in grid view - Ted Hinklater - 2025-02-02

you want to target #guestCastCollapsible

RE: CSS for tv series guest stars in grid view - zelpi - 2025-02-03

I inserted this (replacing only #guestCastCollapsible), but it didn't work:

#guestCastCollapsible .card.overflowPortraitCard {
width: 4.2cm;
font-size: 90%;
}
#guestCastCollapsible .personCard {
width: auto;
}
#guestCastCollapsible .personCard .cardBox {
margin-bottom: 0px;
margin-right: 20px;
}
#guestCastCollapsible {
flex-wrap: wrap;
}
.itemDetailPage .cardText {
text-align: left;
}
.itemDetailPage .textActionButton {
text-align: left;
}

RE: CSS for tv series guest stars in grid view - Ted Hinklater - 2025-02-03

sorry mate I just had a look, it's #guestCastContent

This will show them as a grid with 6 columns

Code:
.layout-desktop #castContent,

.layout-desktop #guestCastContent {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 0em;

    white-space: normal;

}

.layout-desktop #castContent .personCard,

.layout-desktop #guestCastContent .personCard {

    width: auto;

}

RE: CSS for tv series guest stars in grid view - zelpi - 2025-02-03

Thanks for the code.

First, the grid was displayed with different image sizes, maybe because the sizes of my original images are different.

I fixed that by changing

width: auto

to

height: auto.

Now it works just fine :-)