Jump to content

smaller posters in Movies and TV Series sections


cochize1

Recommended Posts

cochize1

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)?

Link to comment
Share on other sites

Happy2Play

🙂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

 

Link to comment
Share on other sites

cochize1

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

Link to comment
Share on other sites

Happy2Play

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.

Link to comment
Share on other sites

  • 2 weeks later...

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

 

Link to comment
Share on other sites

  • 2 weeks later...
cochize1

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?

Link to comment
Share on other sites

Happy2Play
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
Link to comment
Share on other sites

cochize1

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

cochize1

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
Link to comment
Share on other sites

Happy2Play
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

Link to comment
Share on other sites

cochize1

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?)

Link to comment
Share on other sites

Happy2Play

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