+- 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: Collection card image occupying too much space (/t-collection-card-image-occupying-too-much-space)
Collection card image occupying too much space - Papero - 2024-09-16
I am new to Jellyfin (just moved from Plex) and currently trying to learn how to customize the design with small Custom CSS code.
I am wondering if there is a simple way to shrink the image associated to a Collection in this screen (see attachment).
All the space available on the left is wasted, due to the Collection image, which could be much smaller (since it contains only "2009").
Eventually I would be happy also removing the image altogether, so that when I click on a Collection I just go to a page containing only the list of movies.
Many thanks for your help.
RE: Collection card image occupying too much space - Papero - 2024-09-18
I can actually answer to myself.
After a bit of studying and copying what others have done in their theme CSS, I found out the required code.
To reduce the size of the picture (and enlarge the space available for the card content) use:
@media {
.detailImageContainer .card {
width: 10vw !important;
}
.detailPagePrimaryContainer {
padding-left: 16vw !important;
}
.detailPageContent {
padding-left: 16vw !important;
}
}
This is just an example. To have an even smaller picture just reduce the 10vw and to expand the content increase both 16vw (you will have to try out what works better for you).
To remove completely the card picture and expand and center the content I did this:
@media {
.detailImageContainer .card {
display: none;
}
.detailPagePrimaryContainer {
padding-left: 2% !important;
}
.detailPageContent {
padding-left: 2% !important;
}
}
Unfortunately I have not found (yet) a way to apply this only to Collections and NOT to each movie card.
I would love to maintain the format unchanged for movies (it's nice to have the large image there) and modify it only for Collections.
Any suggestion?