Responsive UI Rules

Design for the smallest viewport first, then progressively enhance for more space — never the other way around.

Layout

• Use fluid, relative units (%, rem, fr, vw/vh sparingly) for layout; reserve fixed pixel values for things that must stay physically constant (hairline borders, icon sizes).
• Build layouts with flexbox/grid, not absolute positioning or fixed-width containers — absolute positioning breaks the moment content length or viewport size varies from what you tested.
• Never assume a fixed viewport width. Test at minimum: ~360px (small phone), ~768px (tablet), ~1280px (laptop), ~1920px (desktop) — real device widths, not just "resize the browser a bit."

Breakpoints

• Choose breakpoints based on where your OWN content breaks (where text wraps awkwardly, where a nav overflows), not by copying a generic framework's defaults verbatim.
• Prefer a mobile-first cascade (base styles for the smallest screen, min-width media queries adding complexity upward) over a desktop-first one (max-width queries subtracting) — it keeps small-screen styles from being buried under overrides.

Images and media

• Always set explicit width/height (or aspect-ratio) on images and embeds so the layout doesn't shift when they load — cumulative layout shift is both a UX and an SEO problem.
• Serve responsive images (srcset/sizes, or a framework's image component) so a phone doesn't download a 4K desktop hero image.

Touch and input

• Every interactive element needs a minimum tap target of ~44×44px with adequate spacing from its neighbors — a button that's easy to click with a mouse can be nearly unusable with a thumb.
• Never rely on :hover alone to reveal necessary functionality (a menu, a tooltip with required info) — touch devices have no hover state.
• Support both touch and pointer input paths for any custom interactive component (drag handles, sliders, custom dropdowns) — don't assume mousedown/mousemove alone covers all devices.

Overflow and text

• Never let content force horizontal scroll on the page body — wide tables, code blocks, and long unbroken strings need their own overflow-x: auto container, not a page-wide scrollbar.
• Set min-width: 0 on flex/grid children that contain text — the flexbox default (min-width: auto) causes text to overflow its container instead of wrapping.
• Use relative font sizing (rem) so users who increase their browser's base font size get a working layout, not an overlapping one.

Testing

• Verify with the browser's device toolbar AND, where possible, an actual physical device — emulators miss real touch behavior, system font rendering, and safe-area insets (notches, home indicators) that only show up on hardware.