'My Media' posters smaller than other posters on the page

[ChrisWade 2]

Hello,

I've recently switched from Jellyfin to Emby and I'm very pleased so far.

One small gripe is the layout. As the title states, there's this discrepancy that really cheapens the look of the homepage.

I feel like they should be the same size as the posters in 'Continue Watching'.

Same problem on Android and Android TV.

I've looked through some old forums but all the custom CSS people have suggested doesn't work in the current version of Emby.

What can we do?

Thank you

Edited October 25, 2024 by ChrisWade

[Abobader 3464]

Hello ChrisWade,

** This is an auto reply **

Please wait for someone from staff support or our members to reply to you.

It's recommended to provide more info, as it explain in this thread:

Thank you.

Emby Team

[Luke 42077]

Hi, there is currently no way to avoid this. This is just based on feedback from users over the years, that they want that section to be smaller. Will you be adding more libraries? Then i think it will make more sense.

[visproduction 315]

Custom CSS tweak:

Sizes:
Menu images are auto created at 345 x 194px.  This is a locked choice from Emby .js code.  The current menu thumbnail view is 80% of this width.  All thumbs adjust automatically depending on the browser width on a monitor. Setting the css style in custom area to --user-cards-size-adjust: 0; brings the menus back to 100% full size 345 x 194px for a browser open to 1920 pixels wide.  This matches the width of wide thumbnails in the continue watching row, which often is set to be the second row.  If the menu is too large, different choices are:

• This tweak:  --user-cards-size-adjust: 0; (100% = 345px width)
• 0.2 (96%  = 332px width)
• 0.4 (92% = 317px width) 
• 0.5 (90% = 310px width)
• 0.6 (88% = 304px width)
• 0.8 (84% = 290px width)
• 1 (current Emby style size = 276px width on a 1920 browser window)

If you go into negative numbers you will get larger, but the quality starts showing. --user-cards-size-adjust:  -0.5; and the menus will be at 110% = 380px and the thumbnails will start to look a little blurry.  You can go to the negative numbers, just be aware of the image will start blurring out.

Custom CSS code:
This code targets only menu rows.  You could put a menu at the top and at the bottom, for convienence and this css style will catch them and make both menu rows have larger thumbnails.

.card.backdropCard.card-hoverable.card-autoactive {
	--user-cards-size-adjust: 0;
}

Here is partial screenshot.  The menus are set to --user-cards-size-adjust: 0;
(There are other active custom styles).
Hope that helps.  Enjoy.

 

 

Edited October 25, 2024 by visproduction

[pwhodges 2012]

But note that this CSS solution only works in the Web client.

Paul

[visproduction 315]

I just noticed that the above code makes all wide thumbnails the same size.  So, if you want to only do the menu and your menu is the first row, you can use this code:
 

.section0.emby-scrollbuttons-scroller > div.padded-top-focusscale.padded-bottom-focusscale.padded-left.padded-left-page.padded-right.emby-scroller.scrollX.hiddenScrollX.scrollFrameX.flex-direction-row > div > div > div > div.cardText.cardText-first.cardText-first-padded {
	--user-cards-size-adjust: 0;
}

Change .section0 to .section1 for the second section, etc. (All the latest rows are one section.)  Of course, this also means, that if some user puts the menu on a different section,  the size adjustment may fail.  This only works for wide thumbnails.  So, if section0 are tall poster thumbnails, they will not change size.  Anyway, it's a hack.  Hopefully, it can work for some setups.
 

I like changing the titles slightly so you know they are menus.  Here is code that does that for only the 1st and 6th section.  I set the My Media menus again at the bottom of the home page for ease of use.  I might be the only one that does that...  Ha.

This code changes titles for the menus only....
 

.section0.emby-scrollbuttons-scroller > div.padded-top-focusscale.padded-bottom-focusscale.padded-left.padded-left-page.padded-right.emby-scroller.scrollX.hiddenScrollX.scrollFrameX.flex-direction-row > div > div > div > div.cardText.cardText-first.cardText-first-padded,
.section5.emby-scrollbuttons-scroller > div.padded-top-focusscale.padded-bottom-focusscale.padded-left.padded-left-page.padded-right.emby-scroller.scrollX.hiddenScrollX.scrollFrameX.flex-direction-row > div > div > div > div.cardText.cardText-first.cardText-first-padded {
	background-color: #0b3f6c;
	border-bottom:3px solid #304531;
	letter-spacing: 0.2em;
}

 

Edited October 25, 2024 by visproduction

[Happy2Play 9780]

14 hours ago, ChrisWade said:

I've looked through some old forums but all the custom CSS people have suggested doesn't work in the current version of Emby.

Depends on the method used but since Emby added Image Size yes most old methods may not work anymore.

And yes as mentioned css will only apply to the web client.

But this topic works also but as mentioned you have to verify text encoding if you are going to copy and paste.