[Accessibility] Fix content overflow and reflow at 320px viewport width (WCAG 1.4.10)

Hello H5P community,

As part of our WCAG 2.1 AA / RGAA 4.1 compliance audit, we identified reflow issues when H5P content types are displayed on narrow viewports (320px CSS pixels wide), which is the reference width defined by WCAG 1.4.10 — Reflow.

Issue description

Several H5P content types do not properly reflow their content at 320px viewport width. Instead of adapting to the available space, the content is either:

• Truncated (cut off with no way to access the hidden portion), or
• Requires horizontal scrolling to view the full content

This affects users who zoom in to 400% on a standard 1280px display (which is equivalent to a 320px viewport), as well as users on small mobile screens.

Content types affected

• Image Hotspots / Interactive Images: hotspot containers and images do not scale down, causing overflow
• Column layouts: multi-column content does not collapse to a single-column layout on narrow viewports
• Various content types: any activity using fixed-width containers or pixel-based widths instead of fluid/responsive units

Expected behaviour

All content containers should use responsive design principles:

• Use `max-width: 100%` on images and media elements
• Use relative units (%, vw, rem) instead of fixed pixel widths
• Multi-column layouts should collapse to single-column at narrow widths
• No information loss and no horizontal scrolling should occur at 320px (except for content that inherently requires two-dimensional scrolling, such as data tables or complex diagrams — per WCAG 1.4.10 exceptions)

WCAG / RGAA references

• WCAG 1.4.10 – Reflow (Level AA)
• RGAA 10.11 – Content reflow without horizontal scrolling at 320px

Suggested approach

A CSS audit across H5P core and major content types to identify:

1. Fixed-width containers (px-based widths without max-width)
2. Missing responsive breakpoints
3. overflow: hidden that truncates content without alternatives

Thank you!