Some classes don't fit in list on small page sizes

[meshy]

When the homepage viewport is reduced to smaller sizes, some of the class names pop out of their containers.

[ghickman]

A quick fix to this would be to use Bootstrap's overflow class for the smaller viewports (we might even just be able to apply it generally?).

The better fix would be to have the explainer be a column which moves below the classes on smaller viewports, but my guess is that could be more work?

Are you considering an update to bootstrap as part of your big refactoring? If so the quicker fix might be a better choice given the layout engine has changed a couple of times in the major version bumps.

[meshy]

The better fix would be to have the explainer be a column which moves below the classes on smaller viewports, but my guess is that could be more work?

That would probably be enough. Another thing that would work at this size (tablet-ish... larger than mobile) would be to reduce the width of the text column, and expand the others. Apologies if the screenshot was misleading -- it's a snippet, not the full viewport.

Are you considering an update to bootstrap as part of your big refactoring?

Besides needing a few small tweaks, I think this version of bootstrap is holding up pretty well, so if I can avoid that for the moment, I will. The nav-bar might be frustrating to fix though. I think there's room for a discussion about a complete re-design, but I'd like to handle that after the refactor.

[rixx]

FWIW, this only happens on screens between 980px and 760px – below that, the layout swaps to single-column is fine (ok, it also happens for MultipleObjectTemplateResponseMixin and SingleObjectResponseMixin starting at 1200px, but at least these two aren't visible by default).

Fixing this properly with how old Bootstrap works is kind of a pain, so I'd probably just allow the class list boxes to side-scroll if needed as a fix for now? See #289.