Mobile First

People look at websites on phones, tablets and computers, and their screens differ a lot in width: a phone's screen is about 375 pixels wide, a tablet's about 768 and a computer's 1280 or more. A page that adapts its layout to the width of the screen is called responsive. In this lesson, you'll make the shelter's home page responsive.

We've put the whole home page together from what you've learned so far: a header with the navigation, the hero with the headline, the cats' cards, the steps of adopting a cat and a footer. But it was designed for a computer screen only. On a phone, the cards and the steps are squeezed, and the navigation doesn't fit.

To see that, you need to change the width of the preview. On a computer, the preview takes up about a third of the window, so on most laptops, it's narrower than a tablet. That's what the bar above the preview, Preview width, is for. You've already used it a few times; in this lesson, you'll need it all the time:

• Fit shows the page at the preview's own width (the number in parentheses).
• 375 px shows it as wide as a phone's screen, 768 px as wide as a tablet's and 1280 px as wide as a computer's.

At 768 or 1280 px, the page is laid out at that width and then scaled down to fit into the preview. Everything is smaller, but the layout is exactly what that screen would show. Try all four buttons and look at the page at each width.

In CSS, styles meant only for some widths are written in a media query: the @media rule, which the CSS course didn't get to. The rules inside it apply only when the condition in parentheses is true, here when the page is at least 48rem (768 px) wide:

@media (width >= 48rem) {
	h1 {
		font-size: 3.75rem;
	}
}

(In older code, you'll see the same condition written as (min-width: 48rem).)

In Tailwind, you don't write media queries yourself. You put a prefix in front of a class, just like hover: in the previous lesson. The prefix md: (from medium) applies the class only from 768 px up. It's a variant too, but it depends on the width of the screen instead of a state. This is, simplified, the CSS that Tailwind makes for md:text-6xl:

@media (width >= 48rem) {
	.md\:text-6xl {
		font-size: 3.75rem; /* 60 px */
		line-height: 1;
	}
}

The backslash in .md\:text-6xl is there for the same reason as in .hover\:bg-orange-600 in the previous lesson: the colon is part of the class name.

A class without a prefix applies at every width. That's why pages with Tailwind are made mobile first: you style the page for a phone first, with classes without prefixes, and then you add classes with prefixes for what should change on wider screens. For example, text-4xl md:text-6xl is a 36-pixel headline that fits on a phone, and from 768 px up, it's 60 pixels.

A common mistake: md: doesn't mean "only on tablets". It means "from 768 px up", so it applies on computers too. And there's no prefix for phones: what's meant for phones has no prefix.

One more thing every responsive page needs. Phone browsers expect pages made for computers, so they lay a page out as if the screen were about 980 px wide and then shrink it to fit. The text is then tiny, and the md: classes apply even on a phone. This line in head tells the browser that the page is ready for every width: it should lay the page out as wide as the screen really is (width=device-width) and not zoom in or out (initial-scale=1):

<meta name="viewport" content="width=device-width, initial-scale=1">

The viewport is the part of the browser window in which the page is shown. The preview isn't a phone, so you won't see any difference there, but on a real phone, a page can't do without this line.