CSS for tv series guest stars in grid view

[zelpi]

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?

[Ted Hinklater]

you want to target #guestCastCollapsible

[zelpi]

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;
}

[Ted Hinklater]

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;
}

[zelpi]

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 :-)