Alignment of content on small mobile layout

[radinamatic]

Summary

Content container is aligned to the right edge of the view which makes impossible to interact with exercises and videos on smaller mobile layouts.

System information

• Version: 0.2.0alpha5.dev35
• Operating system: iPhone 5S & Android 4.2.2
• Browser: all (Safari, Chrome, Firefox)

Screenshots

Chrome

Firefox

[radinamatic]

Reproducible on responsive view in Chrome dev tools, so you don't have to test on "real" mobile phone... 😛

[radinamatic]

Hint: if I deactivate the right: 0 for content-container it aligns left and at least is horizontally scrollable, which could be an interim solution:

[radinamatic]

@indirectlylit I did not test in browserstack, but I can reproduce this issue in responsive layout view in both Chrome and Firefox. It seems the width of video player (and its upper containers) gets stuck at 840px even on smallest screen sizes:

https://instantschools.learningequality.org/learn/#/recommended/1d8f6d84618153c18c695d85074952a7/content/82661ee52b345fbf9e82182e3f3ad3fa

https://instantschools.learningequality.org/learn/#/recommended/1d8f6d84618153c18c695d85074952a7/content/82661ee52b345fbf9e82182e3f3ad3fa

[jamalex]

I get this when I load the online demo server (as you're using, @radinamatic), but not when I test locally with the latest version. It seems someone may have inadvertently fixed it along the way? I'm going to relaunch the demo server soon, after hearing back from VF about when a brief downtime is best to happen, but in the meantime, could we set you up for testing locally?

[jamalex]

Ok, demo server has been updated! Seems to work for me now.

[radinamatic]

Ha, half an hour later, magic happens! 👍 🎉

Player control bar is still too wide, not sure if we can do something about it... 🤔

[jamalex]

Literally magic, we don't know who fixed it.

[jamalex]

Oh, yeah -- I wasn't getting that on "iPhone 6", but I do see it on "iPhone 5" -- I think it's because there's no room for all the buttons in the bar, so it has an effective min-width; can we have it hide some of the controls below a certain width, @christianmemije?

[radinamatic]

Forward and Rewind buttons would be my choices if we're hiding controls button at this width...

[jamalex]

Most exercises are now better, but some still have subtler issues, where they have components with bigger min-widths, e.g. https://instantschools.learningequality.org/learn/#/recommended/11d9de56da744f98877cc9fe710bb78d/content/9cefc3c618da41c79861df2a29ad8c9f

May be no easy & general-purpose fix for this particular kind of issue.

[radinamatic]

True, we may have to take them one-by-one at some point.

[indirectlylit]

thanks guys

made a new issue for the one referenced above: #1074