Mobile Display Issues

royk

Hello,

We are having a few display issues with the mobile version of our site. Our normal mobile landing page is our album list page: http://possibleproductions.com/genre/works/

The two display issues we have are:
1) When viewed on mobile, the category sort bar at the bottom has a lot of extra black negative space surrounding the otherwise white tiles. Is there a way to get rid of this so it only displays the category tiles?
2) The mouse-over "hover" effect for the album thumbnails obviously doesn't work on mobile, but is there a way to have the mobile site automatically "hover" effect the top-most thumbnail as visitors scroll, or implement a mobile-only labeling option so mobile visitors can tell what each thumbnail is without affecting the cleanliness of the desktop display?

Thank you,
Roy

Air

Hello:-)

royk said: 1) When viewed on mobile, the category sort bar at the bottom has a lot of extra black negative space surrounding the otherwise white tiles. Is there a way to get rid of this so it only displays the category tiles?

It seems that this your change, as there in no such code in original Photon theme.
Add this custom CSS:

.genre-filter {
background-color: transparent;
}

royk said: 2) The mouse-over "hover" effect for the album thumbnails obviously doesn't work on mobile

I think we could attack this with custom CSS also. Lets try this:

@media only screen and (max-width: 600px) {
.archive-item figcaption {
    background-color: rgba(0,0,0, 0.5);
}
figure.archive-item.classic-eff h2, figure.archive-item.classic-eff .album-categories, figure.archive-item.classic-eff .excerpt {
    opacity: 1;
}
}

With kind regards.

royk

Thank you very much, both solutions worked!

Just to clarify, is there a way to make only the top-most thumbnail on the mobile site have the hover effect/display the label? Ideally, this would mean that as visitors scroll down on their phone browser, it would "highlight" the thumbnails as they reach the top of the screen, turning on the hover effect and revealing the album title. I understand if this might be out of support scope, but thought I'd ask in case it is not too difficult. Cheers!

Air

This would require writing some custom JavaScript for this. Can't help you with this, but I must admit it sound like nice solution to this issue. BUT, why do it like this when user only see 2 max 3 items on its mobile screen, so it doesn't matter if others have text or not. You can't also be sure that user will wsnt to know more only about most top item :-) So ideal solution would to highlight all visible items, and that what you have now ;-)

With kind regards.