Responsive Content Structuring

All in one: every responsive habit, right beside wrong

What this example compares

Fixed vs fluid width: width: 800px vs width: 100% vs max-width: 800px
The viewport tag: no tag vs width=device-width, initial-scale=1.0 vs user-scalable=no, and the other <meta> tags
Mobile-first and source order: header, nav, main, aside, footer vs a jumbled order vs three squeezed columns vs a layout table
Flexible media: width/height alone vs max-width: 100% alone vs max-width: 100%; height: auto, for <img> and <video>
The right file: srcset + sizes vs <picture> + <source media>, on a phone and a laptop
A media query: @media (min-width: 600px) vs (max-width: 600px)
Height: height: 30px vs height from the content vs a <br> stack
Too wide: a wide table vs <div style="overflow-x: auto">; a long address vs a wrapped one
Touch: a tiny link vs a large target; type="text" vs "email" vs "tel" vs "number"
Testing: F12 vs Ctrl+Shift+M vs a real phone, and the pass checklist

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see ten panels. In panel 1 the 800-pixel box is cut off by its phone while the two fluid boxes fit. In panel 2 the first phone shows only a thin line of unreadable, shrunken text and the other two are readable. In panel 3 the first phone lists header, nav, main, aside and footer in order, the second puts the side links before the menu, and the last two squeeze three columns. In panel 4 the first picture overflows, the second fits but sits in a tall empty box, and the picture and video in the last two scale neatly. In panels 5 and 6 the phone shows two drawings and two stacked sections, while the laptop shows the words "Campus at dawn" twice (it chose the big files this demo does not have) and the two sections side by side. Panels 7 to 10 show text spilling out of a fixed height, a table that scrolls the whole phone next to one that scrolls only in its dashed box, the touch controls, and a "drag me" box you can make narrower. Nothing is printed in a console, because this page has no JavaScript.

Quick check: in panel 4, the second picture already has max-width: 100%. Why does it still sit in a tall, mostly empty box?

Because its height="200" attribute still applies. max-width: 100% only makes it narrower, so its shape is wrong. Adding height: auto makes the browser work out the height from the picture's shape, which is why the full rule is img, video { max-width: 100%; height: auto; }.