Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support

Why a Popup Looks Fine on Your Screen But Gets Cut Off on Someone Else’s

Field Note #149
🔬 Generalized 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience
You test a popup, dropdown, or expandable panel on your own monitor, and it looks perfect. Then a visitor on a smaller laptop, or someone who’s simply resized their browser window, reports that the top of it is missing — cut off mid-content, like it was sliced by an invisible blade.
Nothing about the popup is actually broken. It’s just been quietly given a way to outgrow the space available to display it.
 
What’s actually happening
If a popup’s height is determined purely by however much content is stacked inside it — with no upper limit set anywhere — it will keep getting taller as more sections, buttons, or text get added to it over time. On a tall enough screen, this is completely invisible; there’s always room, so nobody notices anything wrong.
But popups are usually anchored to a fixed spot near the bottom of the screen, growing upward from there. On a shorter screen, or a browser window that isn’t very tall, the popup can become taller than the actual visible space above it. Since it’s anchored from the bottom and has nowhere else to go, the extra height simply runs off the top of the visible screen — the part furthest from its anchor point.
 
How to tell the difference
Resize your own browser window to be noticeably shorter (or use your browser’s device-toolbar / responsive preview mode set to a short height) and see if the same cutoff reappears. If it does, that confirms the issue is the popup’s own uncapped height, not something specific to the other visitor’s device.
 
The fix
Set a maximum height for the popup, defined relative to the visitor’s actual screen size (typically as a percentage of “viewport height,” often written as vh in CSS) rather than a fixed number of pixels. Just as importantly, make sure whatever content is inside the popup can scroll internally on its own once that limit is reached — otherwise you’ve only moved the problem from “cut off” to “unreachable,” with content still hidden below the fold.
 
How to avoid it next time
Any time new content gets added to a popup or panel — a new button, a new section, a disclaimer line — re-test it at a shorter window height, not just your own monitor’s usual size. A popup that started out comfortably small can quietly grow past a safe height over many small additions, with no single change ever looking like the one that broke it.

Tagged in :

More from the field