+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: General Questions (https://forum.jellyfin.org/f-general-questions)
+--- Thread: Change home page cards size (/t-change-home-page-cards-size)
Change home page cards size - poiaman - 2024-07-11
Is it possible to change the size of these cards via custom css?
I made it in Photoshop just to show what i want to do
RE: Change home page cards size - Efficient_Good_5784 - 2024-07-11
Have you checked out the client setting that provides an alternate small styling to them?
Client Settings > Home > "Home screen section 1"
In the 1st home screen section, chose "My Media (small)" and save at the bottom of the page.
Reload your browser and see if you like them.
RE: Change home page cards size - poiaman - 2024-07-11
(2024-07-11, 02:32 AM)Efficient_Good_5784 Wrote: Have you checked out the client setting that provides an alternate small styling to them?
Client Settings > Home > "Home screen section 1"
In the 1st home screen section, chose "My Media (small)" and save at the bottom of the page.
Reload your browser and see if you like them.
I tried, but it stayed like this, without thumbnails
RE: Change home page cards size - poiaman - 2024-07-12
I found this, it seems like a good start, but it's still pretty ugly, it needs to be improved but I don't have that knowledge
.cardImageContainer {width: 5.152cm !important; height: 6.4cm !important;}
.blurhash-canvas, .cardScalable, .cardBox {width: 5.152cm !important; height: 6.4cm !important;}
.overflowBackdropCard {width: 5.6cm !important; height: 6.4cm !important;}
.cardPadder {width: 0 !important; height: 0 !important;}
RE: Change home page cards size - poiaman - 2024-07-12
My friend GPT and I managed to improve a little:
#indexPage {
.cardImageContainer {border-radius: 1em !important; width: 100% !important; height: 100% !important;}
.blurhash-canvas {border-radius: 1em !important; width: 100% !important; height: 100% !important;}
.cardScalable {border-radius: 1em !important; width: 100% !important; height: 100% !important;}
.cardBox {border-radius: 1em !important; width: 90% !important; height: 90% !important;}
.overflowBackdropCard {border-radius: 1em !important; width: 7cm !important; height: 8cm !important;}
.cardPadder {border-radius: 1em !important; width: 0 !important; height: 0 !important;}
}