Results for “layout”
Small, practical examples. Search by task or narrow things down below.
Adapt a layout to viewport orientation
CSS: The orientation query compares viewport dimensions rather than detecting a physical device type.
CSS✓ Tested
Enhance a layout above a minimum viewport width
CSS: A mobile-first min-width query adds columns when enough horizontal space is available.
CSS✓ Tested
Hide interface controls in print layout
CSS: A print media query can retain article content while removing interactive controls.
CSS✓ Tested
Keep a label available without occupying visible layout space
CSS: A clipped one-pixel label remains the input’s accessible name.
CSS✓ Tested
Measure an element after layout
Measure an element after layout with a small React component and explicit browser behavior.
React✓ Tested
Move a box visually without changing its layout slot
CSS: Transforms change the painted geometry while leaving surrounding normal-flow layout unchanged.
CSS✓ Tested
Parse a date with a Go layout
Parse a date with a Go layout using a complete Go program with explicit sample inputs.
Go✓ Tested
Remove a hidden element’s layout space
CSS: Display none removes a box from layout as well as hiding its contents.
CSS✓ Tested
Adapt a component to its own container width
CSS: Container queries respond to a selected ancestor rather than the full viewport.
CSS✓ Tested
Add a clear boundary in forced-colors mode
CSS: Use a system color for a border when the user’s forced-color mode is active.
CSS✓ Tested
Add depth with a box shadow
CSS: Box shadows are painted outside the box without reserving additional layout space.
CSS✓ Tested
Add inner spacing to a content-sized box
CSS: In content-box sizing, padding adds to the declared content width.
CSS✓ Tested