Fit any screen width

There is one thing about a web page that is decisively unlike paper: you do not know how big the reader's screen is. It might be a five inch phone, it might be a twenty-seven inch monitor. The same page gets opened on screens that differ in width by nearly ten times.

On paper you settle on A4 and design inside it. On the web you cannot, so the page has to change shape to suit the screen it was opened on. That way of thinking is what people call responsive.

At the middle of it sits the media query. You can write CSS with a condition attached: "when the screen is narrower than this many pixels, use these settings". Stack things when narrow, put them across when wide. The point is that the HTML stays as one thing and only the presentation switches. You are not building a separate page for phones.

The widths you switch at are called breakpoints. The boundary between tablet and desktop is a popular one, but trying to match every model of device never ends. The practical way is to find the width where the layout looks broken and cut there.

The other important question is which side you write from. Writing for the narrow screen first and adding as it gets wider is called mobile first, and this course takes that position. The reason is simple: the narrow screen is the harder constraint. Get the narrow one standing first and the wide one only needs room handed out. The other way round, you hit a wall when you come to cram it onto a phone.

The second half of the chapter deals with settings that follow the width: a share of the screen width, and caps to stop things growing too big. Text size can respond to the screen as well. Instead of switching in steps, it follows along smoothly.

Learn how to check what you have made, too. Narrow the browser for real and look for the moment it breaks. A sideways scrollbar is a sign that something is spilling out. A page that scrolls sideways on a phone is horrible to use, so it is worth stamping out every time.

The most common cause of spilling is an element with a fixed width. A box you wrote as 300px sits there at 300px even when the screen is 280px, and that is your sideways scroll. It is safer not to fix widths but to say "this share of the screen" or "no more than this". Long strings of text and large images can spill too, so check them.

Another one that is easy to forget is the setting that tells the browser how wide the screen is. Leave it out and a phone treats the page as desktop width and shrinks the whole thing down. Pages with text too small to read are usually this. It is one line at the top of the HTML, so put it in.

This chapter is also where the most time goes in real work. "Perfect on desktop and broken on a phone" is the problem that comes up most often in building for the web. Have this in hand and it stops costing you every time.

Do not forget pictures either. Drop a large image straight in and it spills on a narrow screen. A single setting saying "never wider than the parent" prevents it, so make it a habit.

In this course you can switch the width of the preview of the code you write. Go back and forth between narrow and wide and see for yourself where things break. The habit of watching what happens when the width changes is the thing to take away from this chapter more than anything else.

And right now, you may well be reading this on a phone. When you cross over to making things, keep hold of that view. Most of the people using what you build are looking at a small screen. Being good to use there is the first goal.