Jump to content

smaller posters in Movies and TV Series sections


Recommended Posts

Posted

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
Posted

Adjust your .smallBackdropCard.

Posted

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

image.thumb.png.e85407a367368d4814c071faf366c8cc.png

Happy2Play
Posted

🙂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

dif.jpg.8d6be7f7cd20d5637811d7e968427163.jpgdif2.jpg.b42f0758f85857a9b5a34c7178bd2f21.jpg

smallBackdropCard = My Media

portraitCard = All poster items

squareCard = Audio

backdropCard = Thumb/landscape images ie Continue Watching

 

Posted

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:

image.thumb.png.b42434c71508013067dfb8505caf7a95.png

Posted

scratch that, this did the trick:

.portraitCard
{width:12.5%;}

thanks amigo

Happy2Play
Posted

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.

  • 2 weeks later...
Posted

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;}

 

  • 2 weeks later...
Posted

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
Posted (edited)
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 by Happy2Play
Posted

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
Posted
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.

Posted (edited)

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 by cochize1
Happy2Play
Posted
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

test2.jpg.b7b260c60870ae2b81ab1a5af162be25.jpg

Posted

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
Posted

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%;}
}

 

  • Like 1
Posted

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

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
×
×
  • Create New...