Responsive Layout
01 Definition
Responsive Layout meaning: A layout that automatically adapts its structure to fit any screen size or window.
A responsive layout uses flexible grids, fluid images, and CSS media queries so one page reflows to fit phones, tablets, and desktops. Columns stack, images shrink, and menus collapse as the viewport narrows. This avoids maintaining separate mobile and desktop sites.
Also called
Why it matters
How Responsive Layout fits the work
A single responsive codebase serves every device, which simplifies maintenance and gives all visitors a usable view instead of a broken or zoomed-out desktop page on small screens.
In context
On the responsive homepage, the three feature columns sat side by side on desktop and stacked into one column on phones.
Practical note
Responsive resizing alone does not guarantee usability. Content that merely shrinks can still be cramped, so define breakpoints around your content, and confirm tap targets and reading order still work.