smaller posters in Movies and TV Series sections

[cochize1 46]

With this code enabled:

/*space between cards*/
div.cardBox { margin: 0.2em;}
div.section0 .cardBox {margin: .2em;}

How do I keep this margin still at 0.2em at Movies and TV Series sections but making the poster smaller (maybe the same size as on the main page while fitting more movies/series in one row)?

[Happy2Play 9445]

Adjust your .smallBackdropCard.

[cochize1 46]

I didn't explain correctly, I mean these posters (but leaving the margin 0,2em between them)

[Happy2Play 9445]

See the difference in how they are scaled?  They start the same then specific elements change.  So look at portraitCard.  Scale all the same or change individually.

          TV Library                                                                                  Home Screen My Media

smallBackdropCard = My Media

portraitCard = All poster items

squareCard = Audio

backdropCard = Thumb/landscape images ie Continue Watching

 

[cochize1 46]

thanks for tutoring me:)

so I managed to address only posters and played with the values a little but no matter what I cannot get rid of this gap next to AlphaPicker

Is there a way around that?

My code:

.portraitCard
{width: 9em}

Maybe somethnig like we did with the backdrop images:

@media (min-width:90em){.smallBackdropCard{width:16.6666666666667%;}

Result:

[cochize1 46]

scratch that, this did the trick:

.portraitCard
{width:12.5%;}

thanks amigo

[Happy2Play 9445]

Other than tweaking padding-left and padding right, all you can do is adjust the card widths as that gap is from not enough room for another card.

[Prism16 1]

Yeah this is what i did, on a 1080p screen i just added the following padding to even it out..

.alphaPickerRow-vertical {padding-right:30px;}

 

[cochize1 46]

ok, back at it, it turns out that my previous code didn't do trick.

When I use this:

.portraitCard
{width: 12.5%;}

it looks al well in PC browser but with mobile phones the posters are so tiny (since they fit 8 in a row) that they are not readable at all and count indicator almost cover them.

So, can I have this code ONLY in PC browsers and not on mobile?

[Happy2Play 9445]

5 hours ago, cochize1 said:

ok, back at it, it turns out that my previous code didn't do trick.

When I use this:

.portraitCard
{width: 12.5%;}

it looks al well in PC browser but with mobile phones the posters are so tiny (since they fit 8 in a row) that they are not readable at all and count indicator almost cover them.

So, can I have this code ONLY in PC browsers and not on mobile?

Why not something like?

@media (min-width:90em){.portraitCard{width:12.5%;}}

or

@media (min-width:90em){.portraitCard{width:12.5vw;}}

 

Edited December 19, 2020 by Happy2Play

[cochize1 46]

I have this other bit of code that keeps fixed My Media width:

@media (min-width:90em){.smallBackdropCard{width:16.6666666666667%;}

How do I go and combine these two codes because if I paste them separately they break?

[Happy2Play 9445]

9 minutes ago, cochize1 said:

I have this other bit of code that keeps fixed My Media width:

@media (min-width:90em){.smallBackdropCard{width:16.6666666666667%;}

How do I go and combine these two codes because if I paste them separately they break?

What do you mean they break?

@media (min-width: 90em)
{.portraitCard {
    width: 12.5%;}
}

@media (min-width: 90em)
{.smallBackdropCard {
    width: 16.16.6666666666667%;}
}

Might have missed the closing } before but appear to work for me.

[cochize1 46]

hmm. when I clear all my code and just paste yours (except the doubled '16.16.' part) it still doesn't work, whereas just this part works fine:

@media (min-width: 90em)
{.portraitCard {
    width: 12.5%;}
}

I mean, there are still 7 posters in a row in TV/Movie section where there should be 8

Edited December 19, 2020 by cochize1

[Happy2Play 9445]

28 minutes ago, cochize1 said:

I mean, there are still 7 posters in a row in TV/Movie section where there should be 8

All i can say is adjust the width.  I assume I see different options as I have different resolution.  I have no min-width: 90em option.  You can try vw instead of % also

[cochize1 46]

Thanks for everything but I can't figure thid out. My restolution is 1360x768 but when I switched to 1920x1080 there also was no any effect. Maybe you could test that and find the right settings for me or point me on where to look (card.css right? and what to look for there?)

[Happy2Play 9445]

I guess something like this, I know it works when I changed my resolution to 1360x768

@media (max-width: 90em) and (min-width: 52em)
{.portraitCard {
    width: 12.5%;}
}

 

[cochize1 46]

thank you, looks good now on both, PC and mobile