Responsive design
Responsive components start with content
A practical approach to 320-pixel reflow, long labels, touch targets, logical stacking, bounded decoration, and container-driven component layouts.
By Gummy UI · Published
Let content find the breakpoint
A responsive component should not wait for a page-wide mobile breakpoint before handling its own content. Labels wrap, support text grows, action groups stack, and tables need an explicit overflow or reflow strategy. Gummy UI uses flexible tracks, minmax sizing, container-driven widths, and focused media rules so the functional content absorbs space before decorative material stretches.
The design system’s launch contract includes narrow reflow down to 320 CSS pixels. That number is a review boundary, not a reason to set every component to a fixed minimum width. Components should remain governed by their container and avoid creating document-level horizontal scrolling.
Keep targets large without forcing rows
Interactive targets use a 44-pixel minimum where the component contract calls for a touch-sized control. On a narrow screen, preserving that height may require labels, secondary text, or adjacent actions to wrap or stack. Compressing several controls into one rigid row can satisfy a screenshot while making each target harder to reach.
Touch review also includes spacing between adjacent actions and scroll behavior around carousels, resizable regions, and overflow containers. CSS touch-action rules can support direct manipulation, but they should not block native page scrolling or replace keyboard operation.
Bound the material
Gel reservoirs and SVG frames need explicit rules at small sizes. A decorative edge that looks balanced on a wide card can collide with a title or occupy most of a compact control. Gummy UI keeps pools at bounded dimensions and lets the content plane take the flexible space, with narrower layouts reducing or repositioning non-essential visual intensity.
This is another reason to keep decoration separate from semantics. Hiding or simplifying a glint at a compact breakpoint should not remove the control’s label, status, or focus indicator. The DOM remains stable while the material adapts around it.
Use realistic strings
Responsive evidence is stronger when examples include long labels, descriptions, validation messages, code, dates, and dense table values. Repeating short placeholder words can conceal overflow until production content arrives. RTL review adds another dimension because inline start, punctuation, and mixed-direction strings affect available space.
The Component Lab and public compositions provide representative content for local review, and recorded audits describe selected viewport checks. Full launch verification still needs repeatable desktop and mobile browser journeys. Source-level media queries are a foundation, not a substitute for rendered measurement.