cochize1 44 Posted November 23, 2020 Share Posted November 23, 2020 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 More sharing options...
Happy2Play 8882 Posted November 23, 2020 Share Posted November 23, 2020 Adjust your .smallBackdropCard. Link to comment Share on other sites More sharing options...
cochize1 44 Posted November 23, 2020 Author Share Posted November 23, 2020 I didn't explain correctly, I mean these posters (but leaving the margin 0,2em between them) Link to comment Share on other sites More sharing options...
Happy2Play 8882 Posted November 23, 2020 Share Posted November 23, 2020 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 Link to comment Share on other sites More sharing options...
cochize1 44 Posted November 23, 2020 Author Share Posted November 23, 2020 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: Link to comment Share on other sites More sharing options...
cochize1 44 Posted November 23, 2020 Author Share Posted November 23, 2020 scratch that, this did the trick: .portraitCard {width:12.5%;} thanks amigo Link to comment Share on other sites More sharing options...
Happy2Play 8882 Posted November 24, 2020 Share Posted November 24, 2020 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 More sharing options...
Prism16 1 Posted December 5, 2020 Share Posted December 5, 2020 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 More sharing options...
cochize1 44 Posted December 19, 2020 Author Share Posted December 19, 2020 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 More sharing options...
Happy2Play 8882 Posted December 19, 2020 Share Posted December 19, 2020 (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 December 19, 2020 by Happy2Play Link to comment Share on other sites More sharing options...
cochize1 44 Posted December 19, 2020 Author Share Posted December 19, 2020 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 More sharing options...
Happy2Play 8882 Posted December 19, 2020 Share Posted December 19, 2020 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 More sharing options...
cochize1 44 Posted December 19, 2020 Author Share Posted December 19, 2020 (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 December 19, 2020 by cochize1 Link to comment Share on other sites More sharing options...
Happy2Play 8882 Posted December 19, 2020 Share Posted December 19, 2020 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 Link to comment Share on other sites More sharing options...
cochize1 44 Posted December 19, 2020 Author Share Posted December 19, 2020 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 More sharing options...
Happy2Play 8882 Posted December 19, 2020 Share Posted December 19, 2020 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%;} } 1 Link to comment Share on other sites More sharing options...
cochize1 44 Posted December 19, 2020 Author Share Posted December 19, 2020 thank you, looks good now on both, PC and mobile Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now