| Pattern | Supported effect | Planning use |
|---|---|---|
| Single-column mobile flow (SWISS Air) | The layout shifts into a cleaner single-column flow centred on flight search | Put the one task most visitors came for at the top of the small-screen layout |
| Multi-column grid to vertical stack (Dribbble) | Multi-column grid on larger screens, single-column vertical layout on mobile | Use for galleries and card collections where every item has equal weight |
| Device-specific calls to action (Dropbox) | CTA language shifts with likely mobile versus desktop intent | Treat button copy as part of the responsive layout, not only the grid |
| Flex container | Expands items to fill free space or shrinks them to prevent overflow | Use for rows of components that must absorb width changes without fixed sizes |
| Media query at a minimum width | New styles apply once the screen is at least 780 pixels wide, in the documented example | Add layout changes at the point where content needs them, not at a device name |
The examples come from Designveloper’s roundup of real websites and Kinsta’s responsive design guide; the 780 pixel figure is an illustration from that guide, not a universal target.
Responsive web design examples are most useful when they show a layout decision rather than a shrinking page. The strongest ones adapt hierarchy, navigation, media and conversion paths, and each pattern depends on a breakpoint that you choose for your own content.
This article sits inside our digital design guide for software. It starts with what named sites do on small screens, then moves to the CSS behind those choices and how to check the result.
What named sites do differently on small screens
Real sites rarely just scale down. They change what comes first, what stays visible and how the main action is worded. Designveloper’s collection, titled Responsive Web Design Examples: 25 Real Websites, makes the same point: the best examples reveal how real websites adapt hierarchy, navigation, media and conversion paths across different screens.
SWISS Air: one task, one column
On mobile, SWISS Air shifts into a cleaner single-column flow centred on flight search. The consequence for your own build is a ruthless ordering decision. If a page serves one dominant task, let that task own the top of the single column and move supporting content below it. This suits booking, sign-up and lookup pages. It suits content hubs less well, where several equal entry points compete.
Dribbble: a grid that becomes a stack
Dribbble moves from a multi-column grid on larger screens to a single-column vertical layout on mobile, as described in the same roundup. This is the classic CSS Grid use case: many items of equal weight that gain columns as space allows. Choose it when users browse rather than follow a path, and when each item can stand alone in a vertical scroll.
Dropbox: responsive copy, not only responsive boxes
Dropbox changes its call-to-action language across devices, shifting the action based on likely mobile versus desktop intent. The practical lesson is that responsive work extends past columns. If your visitors plausibly want different things on a phone than at a desk, the button label and its position belong in the responsive plan too. Only do this where you have a reason to believe intent differs; changing copy for its own sake adds maintenance without benefit.
Demo layouts for news and magazine pages
Speckyboy’s news and magazine CSS layouts are code demos rather than live sites, but they show how two techniques map to editorial pages. The news layout uses CSS Grid as a 12-column layout, with a large feature story that takes up two-thirds of the first row. The magazine layout uses Flexbox to add retro shapes, multicolumn flowing text and a large featured image. Treat them as starting points to adapt, not finished designs.
Choosing a pattern for your layout
Match the pattern to how users move through the page, then pick the CSS tool that expresses it most simply. These choices cover the most common situations.
- Feature-led editorial pages: a Grid with many columns lets one story dominate while smaller items sit beside it. It suits news homepages, and it is overbuilt for a single long article.
- Rows of components with unpredictable content: Flexbox suits toolbars, tag lists and card rows because items grow into free space or shrink to avoid overflow.
- Galleries and catalogues: a multi-column grid that collapses to a vertical stack, as Dribbble does, keeps every item reachable without horizontal scrolling.
- Task-first flows: follow the SWISS Air approach and let the main form lead the single column. Move secondary content beneath it.
- Tight header space: a sticky action bar can appear only when space is tight, adapting across breakpoints so it is hidden where the header has room, according to this pattern description. Use it when a key action would otherwise scroll out of view on small screens.
- Fluid page widths: a fluid layout relies on dynamic values such as a percentage of the viewport width rather than fixed sizes, which keeps the page continuous between breakpoints.
Dense data screens add their own constraints around what stays visible; our guide to Dashboard UI Design: Build Clear, Actionable Interfaces In 2026 – Interestingdevelopment picks that up, and UI Design Trends 2026: 7 Essential Shifts Every Designer Should Know – Interestingdevelopment places these layout habits in the wider direction of interface design.
How breakpoints and media queries work
A breakpoint is the width of the screen where you use a media query to implement new CSS styles. Media queries let content adapt to different factors such as screen size or resolution. The breakpoint is therefore a decision you make, and the media query is the mechanism that carries it out, as Kinsta’s guide explains.
The guide’s example applies styles only if the screen is at least 780 pixels wide. Adapted into a minimal pattern, it looks like this:
.layout { display: block; }
@media screen and (min-width: 780px) {
.layout { display: flex; flex-wrap: wrap; }
}
Below the breakpoint, content stacks in a single column. Above it, the container becomes a flex row that wraps. Place breakpoints where your own content starts to look stretched or cramped, and treat 780 pixels as an illustration of the syntax rather than a recommended value.
Fluid layouts, Flexbox, Grid and images
Between breakpoints, the layout should keep adapting on its own. A flex container does this by expanding items to fill available free space or shrinking them to prevent overflow. A minimal wrapping row looks like this:
.cards { display: flex; flex-wrap: wrap; }
.card { flex: auto; }
Grid suits layouts where rows and columns both matter. The 12-column news layout above is the reference case: define a column template once, then place the feature story across two-thirds of the first row. Choose Grid when you need that two-dimensional control and Flexbox when you only need items to flow along a single line.
Images need their own rules. The basic fix from Kinsta’s guide makes an image fill its container:
img { width: 100%; }
To serve different versions scaled for different devices, use the HTML srcset attribute, which lists the same image at several widths:
<img src=”img-320.jpg” srcset=”img-320.jpg 320w, img-1024.jpg 1024w” alt=”Product photo”>
The width rule keeps a picture inside its column. The srcset list lets the browser pick a version scaled to the device, so smaller screens are not forced to take the largest file.
Testing responsive layouts
Test by comparing the layout on real devices and by using Chrome Developer Tools, both of which Kinsta lists as ways to check whether a layout is responsive. Developer tools are the quicker first pass, while a real phone or tablet catches what emulation misses.
- Sweep across your breakpoint: open the page in Chrome Developer Tools and change the viewport width gradually, watching what happens as the width crosses each media query. Awkward intermediate states usually show up here.
- Check the single-column state: confirm the main task or content leads, as in the SWISS Air flow, and that nothing relies on a hover or a wide layout to make sense.
- Check each pattern’s own failure point: for a grid that collapses, confirm items stay in a sensible reading order. For flex rows, confirm items shrink rather than overflow. For a sticky action bar, confirm it appears only where header space is tight.
- Compare on actual hardware: view the layout on at least a phone and a larger screen you can hold, and compare it against the emulated result.
Run the same checks after every layout change. A breakpoint added for one component can quietly disturb another, so repeat the sweep whenever the CSS moves.
Frequently asked questions
Where can I find more responsive web design examples?
Designveloper’s roundup, Responsive Web Design Examples: 25 Real Websites, names 25 live sites and describes how each adapts hierarchy, navigation, media and conversion paths. Speckyboy’s news and magazine layouts add code-level demos.
Do I still need media queries if I use Flexbox?
Usually yes. Flexbox lets items expand or shrink within a container, while a media query applies new styles at a chosen breakpoint. Flexbox handles gradual adjustment, and media queries handle changes of structure, such as moving from a stack to a row.
What does a mobile-first approach mean for the CSS?
It means a single column and smaller font sizes form the base styles. Larger-screen rules are then added at breakpoints, typically with minimum-width queries like the one shown above.
