Water column and other boxes overlap on small screens

[dboyer]

See below screenshot. Options:

• Limit how small the screen size can be
• Unlock the width of the right sidebar

Note that many students access the site via Chromebooks or as part of the Learning Portal so the available space is even smaller.

[dboyer]

Possible resources to check:

Runoff Simulator: Lesson 5: Pages 2, 3, & 4
https://authoring.concord.org/activities/10566

Model My Watershed:
Lesson 1: Page 4 - This is a teacher led tour of the school's watershed and should not be a problem as long as the teacher is presenting on a board in the classroom.
https://authoring.concord.org/activities/10556

Lesson 8: Pages 2 & 3 - These pages have a static left side student action list. We are looking for this to become an auto slide as in the TEST version below.
https://authoring.concord.org/activities/10571

Lesson 8 Test Version: Page 2
https://authoring.concord.org/activities/10261

[dboyer]

@designmatty Design time here too.

[rajadain]

Commenting to get email notifications on activity.

[designmatty]

Do we know the smallest device students might use? Would the use phones? If so should it just be fully mobile optimized to fit all screens?

[rajadain]

Unfortunately it's not just small screens. Some students don't access the site natively, but via an iframe from within their "learning portal", which has other UI elements that get in the way, making the app quite difficult to use:

The above example uses the main app, but would apply to Runoff as well.

Given that, I think considering making it mobile optimized would be the way to go. However, before we do it, we should estimate how much that would cost and present it to them. If you could post estimates here, or in #mmw slack, or DM me or @dboyer, we'll run it by them.