Results for “viewport”
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
Apply a rule at a viewport breakpoint
CSS: Learn how to apply a rule at a viewport breakpoint in a complete browser example.
CSS✓ Tested
Choose a different image for a small viewport
HTML: Picture evaluates source media conditions before falling back to the img source.
HTML✓ Tested
Choose the smaller of a fixed and viewport-relative size
CSS: Min selects whichever supplied length is smaller at the current viewport.
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
Keep a control fixed to the viewport during scrolling
CSS: Fixed positioning normally uses the viewport when no ancestor establishes a different fixed containing block.
CSS✓ Tested
Keep a viewport-relative size above a minimum
CSS: Max selects the larger of the candidate lengths.
CSS✓ Tested
Size a panel relative to viewport height
CSS: Viewport height units track the browser viewport rather than the parent element.
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
Declare document language and encoding
Set the HTML language, UTF-8 encoding and viewport for accessible responsive content.
HTML✓ Tested
Leave room above a scrolled-to heading
CSS: Scroll-margin offsets scrollIntoView placement so a heading is not flush against the viewport edge.
CSS✓ Tested
Stack columns on small screens
Change a two-column CSS grid to one column at a viewport breakpoint.
CSS✓ Tested