CSS responsive conditions and text
Viewport and container conditions, direction mapping and readable overflow.
Keep a responsive lesson in its reading order
Place instructions before results in both source and visual layout at narrow and wide widths.
Adapt a component to its container width
Use a local size container so a narrow component stays stacked inside a wide viewport.
Test the exact boundary of a responsive media query
Check 599px, 600px and 601px instead of relying only on a phone and desktop screenshot.
Bound fluid type between two endpoints
Measure clamp(20px,4vw,36px) at three viewport widths.
Mirror spacing through the inline direction
Map inline-start and inline-end padding onto physical left and right sides.
Wrap a long token without deleting characters
Keep an unbroken identifier readable inside 180px without ellipsis or clipping.
Keep a wide table in its own scroll region
Preserve a 600px data table while the surrounding document fits a phone-width frame.