search

Fallenbagel / Hint-of-Colors

Heavily inspired by Hint-of-Green but with more colors and heavily modified
19 stars 6 forks source link

"my media" broken on mobile #2

Closed tywentghxst closed 2 years ago

tywentghxst commented 2 years ago

Hi! I just found your work and it's one of the best, I definitely love the my media headers, but they seem broken on mobile, could you please look in to fixing it if it's not too much trouble? Thanks for your work!!! Screenshot_20220722-025534_Jellyfin.jpg

Fallenbagel commented 2 years ago

Hi. As mentioned in my readme, in hint of colors, you will have to change my media to my media (small) for it to work image

tywentghxst commented 2 years ago

Hi. As mentioned in my readme, in hint of colors, you will have to change my media to my media (small) for it to work image

Ahhhhh my apologies, I don't know how I missed that when I was looking🤦‍♂️🤦‍♂️🤦‍♂️

I did however find a way to make it work without using small media using some of your code to look like this Screenshot_20220722-114639_Gallery.jpg

But I'm definitely gonna retry yours tonight because it looked great! Thanks for the help

Fallenbagel commented 2 years ago

ooo how did you set it up. Maybe i can put that as an option for peeps

tywentghxst commented 2 years ago

This is what made it work like that for me on mobile, I think the biggest thing that annoys me for it is it's not fully centered tho on mobile lol, can't seem to figure that out, seems to change the center position if you try to up the VW variable on the last line here where I have it at 28vw

@media (max-width: 62.5em) { .section0 .cardText.cardTextCentered.cardText-first { height:2.5em } } .section0 button.itemAction.textActionButton { background:rgba(0,0,0,0); border-radius:var(--rounding); height:3.5em }

.section0 .overflowBackdropCard,.section0 .overflowSmallBackdropCard { max-width:90vw }

.section0 .emby-scroller { margin-right:0 }

@media (max-width: 1px) and (orientation: landscape) { .section0 { display:none } }

.section0 .sectionTitle { padding-top:60px!important }

@media (max-width: 1px) { .section0 { display:none } }

.section0 .sectionTitle { display:none }

.section0 .itemsContainer { align-items: center; justify-content: center; margin-top: 0px; }

.section0 .overflowBackdropCard, .section0 .overflowSmallBackdropCard { max-width: 28vw }

Fallenbagel commented 2 years ago

This is what made it work like that for me on mobile, I think the biggest thing that annoys me for it is it's not fully centered tho on mobile lol, can't seem to figure that out,

have you tried self-align: center?

tywentghxst commented 2 years ago

Yes, depending on the size though it becomes off center, I've just went with removing the center alignment and that seemed to have fixed it,, is there any chance you know a way to make a self align center Command only work on desktop and not mobile?

Fallenbagel commented 2 years ago

Anything written with .layout-mobile infront would only affect mobile so you can use that to do that

tywentghxst commented 2 years ago

Thanks!! I'll give it a try