Jump to content

another CSS size breakpoint for large screens


computerprep
 Share

Recommended Posts

computerprep

I work on a 27" Thunderbolt display often... and it'd be nice if we could get another breakpoint for .scalableCard.portraitCard posters...

 

something around the 2000px mark for 10% width is what I'm thinking, but it might need to be specific to non-retina displays. So the media query should include -webkit pixel ratios and min-resolution.

kinda like this. https://css-tricks.com/snippets/css/retina-display-media-query/

 

Currently on this screen, poster images are coming out at 311x511px, real life 2.75x4.125" ... they're just monsters.

 

Smaller subset of people, but that group of people will grow as technology gives us larger screens for less $$

Edited by computerprep
Link to comment
Share on other sites

anderbytes

@@Luke, I was going to open a new thread for a similar matter, but instead I'll complement @@computerprep request.

 

My screen is 1600x900, and when I try to view items details, it seems that Emby puts a max width to content that leaves two huge blank areas beside posters and everything (full size.jpg).

 

- If I resize window to smaller sizes, it gets auto-adjusted (as seen in attached small.jpg, medium.jpg and large.jpg)

- If I do custom CSS, like .detailPageContent { max-width: 90%; }  , I can force that the whole window is used, but that is not good because images gets stretched and appears very blurry.

 

 

     All sections are impacted by this width limit: Main info, Cast & crew, Check these out... , Details, Media info...

 

 

Could you please take a look?

post-109582-0-43415300-1471528763_thumb.jpg

post-109582-0-63344000-1471528772_thumb.jpg

post-109582-0-30096600-1471528779_thumb.jpg

post-109582-0-58203100-1471528785_thumb.jpg

Link to comment
Share on other sites

anderbytes

:ph34r: "Fix me! I'm a bad, bad bug !"

Edited by anderbytes
Link to comment
Share on other sites

computerprep

it seems that Emby puts a max width to content that leaves two huge blank areas beside posters and everything

I need time check this out oh a computer before giving a more detailed response, but we "should" be able to solve this properly with custom CSS.

 

Again, I'll see what I can finagle.

 

Ultimately, your issue might be best solved with custom CSS. In the world of UI/UX design, you want to keep the total number of characters per line pretty low. Otherwise the average human eye/brain had a hard time tracking to the next line and is more likely to lose interest ave not truly absorb the information they're reading.

 

The content passes already break the "rule" ... But they do it in a similar way to Netflix, Hulu, and others.

 

All thus is just to say that removing the margins on the right and left will have very adverse effects to must users. These pages could be organized better, but simply removing the margins is not ideal to implement for everyone.

 

I like the critical eye, though. Keep posting when you find things that could be improved.

 

I'll try to look at writing some better custom CSS for you early next week.

Link to comment
Share on other sites

anderbytes

Well, if you consider that main screen and library browser already fill the screen beautifully, I just don't see why this screen can't be that way, too.

 

About quantity of lines, I already suggested in the past that the number of lines be also customizable. For me, only 1 line would be perfect.

Edited by anderbytes
Link to comment
Share on other sites

anderbytes

Oh.. and more. I saw that server calculates how many photos it returns in real time, so other than what I did with CSS above, don't know what can be done...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...