Responsive Web Design

What you should see

You should see eleven panels. In panel 1 phone A is a tiny, unreadable miniature whose box is green ("500px or wider"), while phone B shows readable text and an orange box ("narrow screen"). In panel 2 the phone lights only lamp 2, the tablet lamps 1, 3 and 4, and the laptop lamps 1 and 4; lamp 5 (print) is off everywhere, and the yellow line under the lamps reports the width of your own Run frame. Panel 3 shows A, B, C stacked on both phones and in a row on both laptops. Panel 4 shows one column at 400px, two columns at 700px, a sidebar at 1000px and a centred, capped page at 1400px. In panel 5 the grid's 4th tile stays one column wide while the flex 4th tile stretches across the line. Panel 6 shows a picture that sticks out, one that is squashed, and one (and a video) that fit. In panel 7 only the first phone runs off its screen, the third and fourth monitors are centred, and the fourth phone's text stands clear of the edges. In panel 8 the 5vw heading is the smallest on the phone but the biggest on the laptop. In panel 9 the right phone keeps the e-mail address and the wrong phone keeps the picture. Panel 10 shows the project page stacked on the phone and with a sidebar on the laptop. There is no JavaScript, so nothing is printed in a Console.