Viewport is not well adjusted for phones and zoom is prevented about popcorn HOT 2 CLOSED

The responsive branch now adjusts to smaller screens like phones. Looks like this:

But there are still a couple issues:

1. The filter (4 buttons at the top) takes up too much space.
2. Flow prevents vertical scrolling of the page
3. The scroller (details text) prevents vertical scrolling
4. Trailer video doesn't scroll into the right position

Here some ideas for fixing them:

1. Change the 4 buttons to a drop down. Or shrink the font size/replace with icons, so that it can be kept in a horizontal row.
2. Allow, vertical page scrolling. Not sure if that's an easy fix. /cc @romancortes Or another option would be to replace the flow with a grid and smaller thumbnails so that you see more movies at the same time. Then when you click on one, the grid slides to the left and the details slide in from the right.
3. Replace scroller with just normal dynamic text component.
4. I think you can't auto-play a video on iOS. So maybe the trailer button could be replaced with the actual video, then it would just be a single click to play it and there would be no scrolling issues. You could still make it fullscreen, by clicking the fullscreen button.

Anyways, in this case, Media Queries alone might not be enough. And it depends how much effort we wanna put in, but maybe it's worth it to rethink the phone version from the ground up to create the best UX possible, instead of just try to restyle it from the fixed size version?

from popcorn.

Obsolete I think.

from popcorn.