Issue Summary

Content of the page fails to reflow when viewed at 320*256 viewport size.

Steps to Reproduce

1. Open the Confluence home page.
2. Navigate to any Confluence page in view mode.
3. Now, open the browser developer tools (Inspector).
4. Activate the “Toggle device toolbar” button to switch to responsive mode.
5. In the device toolbar, from the device dropdown, select any mobile device or choose “Responsive”.
6. Set the viewport size to 320 × 256.
7. Observe that the content fails to reflow.

Screenshot

Actual Results

Content fails to reflow when user view the page at 320 * 256 viewport zoom, the main page content is not available on the page at reflow resolution by default. Horizontal scrollbar appears on the page which make the users scroll both vertically and horizontally to read content.

As a result, low vision users have difficulty in reading content as they need to navigate in two dimensions.

Expected Results

All the content on the page should be available when the page is viewed at 320 * 256 viewport. Ensure that all the page content is visible when viewed at 320 * 256 viewport. Use relative units to define font and container sizes in CSS to ensure that the page's content reflows correctly when viewed at 320 * 256 viewport. In addition, use CSS media queries to display web page content correctly when viewed using different devices, such as mobile phones, tablets, and so on.

Only one vertical scrollbar should be present on the page. Users should be able to read and navigate content by scrolling in one dimension (vertically) without horizontal scrolling. Use responsive units(%, vw,vh, max width) instead of fixed pixels and avoid nested scrollable regions.

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2021)
macOS - Tahoe 26.5.1
Windows - 11
Chrome - Version 151.0.7922.108 (Official Build) (arm64)
Safari - Version 26.2 (21623.1.14.11.9)