A Browser Zoom Check for a Sticky Enquiry Summary

A sticky summary panel is handy on an enquiry form. It keeps the chosen items and details in view while someone fills in the form. The trouble starts when a visitor enlarges the page. The panel grows in proportion, the usable window shrinks, and the summary may sit on top of the fields. This article proposes a test card you could use to catch that. It is a design proposal, so tune the values to your own layout.

Why zoom causes trouble

Zooming in reduces the available viewport in layout terms. A panel fixed to the top or bottom takes a larger share of the window. On a short window it can take most of it, leaving the form behind it and out of reach.

Zoom and obstruction test card

Set up: a representative form with several fields, a submit button, and a summary with a realistic number of lines. Use a desktop window and a phone-sized window. For each zoom level, mark pass or fail.

Zoom levels to try: 100%, 150%, 200%, 300%, and text-only enlargement if your browser offers it.

At each level, check:

Can you reach every field by scrolling normally?
When a field is focused, whether by click or by Tab, is it fully visible and not behind the summary?
Is the submit button reachable and visible?
Does the summary have a way to be collapsed, or does it stop being sticky when space is short?
Does the summary's own content stay readable, or is it cut off with no way to scroll it?
Is any text overlapping other text?
Does an error message that appears after a failed submit land in view?

Branch decisions

Summary covers a focused field: let the page scroll the field clear of the panel, or stop the panel being sticky below a size threshold.
Summary is taller than a chosen share of the window, for example a third: collapse it to a one-line header with an expand control.
Summary's content is long: give it its own scroll area, or show a short count with a link to the full list.
Bottom-fixed summary hides the submit button: place the button above it or end the stickiness near the form's end.

Hypothetical worked example

Imagine a form with six fields and a summary pinned to the top that lists three chosen items. At 100% the layout works. At 200% on a laptop-sized window the summary takes about half the height. Tabbing to the phone field leaves it hidden behind the panel. Under the test card, item 2 fails. The team decides that below a certain window height the summary becomes a normal block above the form instead of sticky, with a collapse control. They run the card again. At 300% the summary no longer covers anything, the phone field is visible when focused, and the submit button is reachable.

Stop conditions

Do not ship a sticky summary if any control can be hidden with no way to reveal it. Stop adding summary content once it forces a collapse at ordinary zoom levels. If a fix works at one zoom level but breaks another, prefer the simpler rule of not sticking at all on short windows.

Acceptance checks

Every row of the card passes at every listed zoom level, on both window sizes.
A keyboard-only run from the first field to submit never loses sight of the focused control.
The summary can be collapsed or stops sticking when space is short, and the collapse control is itself reachable.
A person unfamiliar with the form completes it at 200% without help.
The results are saved with the layout version tested, so the card can be rerun after any change.